margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。

（该文章解释是否正确有待商榷，目前我的实验结果为:在默认情况或者div左浮动的情况下：margin-top/margin-left是有效的，margin-right/margin-bottom是无效的；当右浮动时，margin-right/margin-top是有效的。）

一、margin的基本特性

margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用来设置 box 的 margin area。属性 margin 可以用来同时设置 box 的四边外边距，而其他的 margin 属性只能设置其自各的外边距。

margin 属性可以应用于几乎所有的元素，除了表格显示类型(不包括 table-caption, table and inline-table)的元素，而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。

或许有朋友对非置换元素(non-replaced element)有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素(replaced element)，也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义:

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

从定义中我们可以理解到，置换元素(replaced element)主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素(non-replaced element)就是除了 img, input, textarea, select, object 等置换元素以外的元素。

margin 始终是透明的。

二、margin 的基本写法

外边距的 margin-width 的值类型有:auto | length | percentage

percentage:百分比是由被应用 box 的containing block(注:一个元素的 containing block 是该元素产生的 box(es)在计算位置和大小时参考的一个矩形)的大小所决定。对于 margin-top 和 margin-bottom 也同样成立。

margin 的默认值为 0，并且 margin 支持负值。

上面我们曾提到属性 margin 可以用来同时指定 box 的四边外边距。如果属性 margin 有四个值，那么值将按照上-右-下-左的顺序作用于四边，即从元素的上边开始，按照顺时针的顺序围绕元素。表达式如下:

  1. margin:top right bottom left;

四个数值中间以空格分隔。效果等同于:

  1.  margin-top:value;
  2.  margin-right:value;
  3.  margin-bottom:value;
  4.  margin-left:value;

并且规范还提供了省略的数值写法，基本原则如下:

  1. 如果没有 left 值，则使用 right 代替;
  2. 如果没有 bottom 值，则使用 top 代替;
  3. 如果没有 right 值，则使用 top 值代替。

根据这些基本原则，我们可以有三种省略方式，但不管怎样省略 margin 的数值都会大于等于一个，而 margin 的默认数值是从 top 开始至 left 结束，那么对于省略的具体情况，我们可以从 left 反推理回去。

1、如果 margin 只有三个值，按照值的顺序为 margin:top right bottom; 缺少了 left，根据原则，则 left 的值有 right 来代替。margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

2、如果 margin 只有两个值，按照值的顺序为 margin:top right; 缺少了 bottom 和 left，根据原则 left 的值由 right 来代替，bottm 的值由 top 来代替。margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果 margin 只有一个值，按照值的顺序为 margin:top; 缺少了 bottom、left 和 right，根据原则 left 的值由 right 来代替，bottom 的值由 top 来代替，right 的值右 top 来代替，也就是说 left 的值也由 top 来代替。margin:10px; 就等于 margin:10px 10px 10px 10px;

三、margin的解析逻辑

目前我们已经了解到了 margin 的基本特性和基本写法，但对元素 margin 的基本解析逻辑还是很模糊，到底 margin 的 top、right、bottom、left 都是以什么为基准来促使 box model 形成。为了形象，易懂的对 margin 的逻辑进行说明，下面讲解的过程中，将引入 W3C 上没有的参考线的说法。何谓参考线?参考线就是 margin 移动的基准点，此基准点相对于 box 是静止的。而 margin 的数值，就是 box 相对于参考线的位移量。

在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线，top 和 left 的参考线属于一类，right 和bottom 的参考线属于另一类。那他们到底各以什么为参考线呢?top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移;left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。right 以元素本身的 border 右边为参考线水平向右位移;bottom 以元素本身的border 下边为参考线垂直向下位移。从上我们可以看到 top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考。上面的位移方向是指 margin 数值为正值时候的情形，如果是负值则位移方向相反。

或许理论听起来比较枯燥，我们举例说明一下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. div {
  8. width:200px;
  9. height:200px;
  10. background:#ccc;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div>外边距的margin-width的值类型有:auto | length | percentage</div>
  16. </body>
  17. </html>

如上代码，很简单，为了方便我们看到效果，我们给 div 设置了宽度和高度以及背景色。

现在我们给 div 的样式加上 margin 属性，比如:

  1. margin:-10px 20px -30px 40px;
  2.  
  3. 这时候 margin 的解析逻辑是怎样的呢?首先我们要搞清 div 的和周边元素的关系，div 没有相连元素，而此时 div 的 containing block 是 body 产生的 block box。则根据上面介绍的参考线原理，div 的左外边距以 containing block 的 content 左边为参考线，及此时以 body 的 content 左边为参考线进行水平向右位移，位移的大小为 40px，同理，上边距以 body 的 content 上边为参考线进行垂直向上位移 10px(负值和正值的方向相反)，下边距依照现在 div 的 borer 下边(此时的 div 已经经过上边距位移过了)垂直向上位移 30px(此时，margin 不会改变 box 的 border 内的物理大小，但会改变 box 的逻辑大小，即:以此 box 的 margin 的下边为参考的元素，不是从 box 的物理位置开始的，而是从逻辑位置开始)，右边距依照现在 div 的 borer 右边(此时的 div 已经经过左边距位移过了)水平向右位移 20px。或许有朋友问你分析的顺序怎么和 margin 表达式中出现的顺序不一样?如果按照 margin 表达式中出现的顺序来分析，结果是一样的，只是为了更好的方便大家的理解而没有按照表达式的顺序来分析。

用 margin 最后的实际显示大小的到底是怎么样呢，或许有朋友也比较疑惑，我暂时用逻辑大小和物理大小来区分(其实上面已用到此概念)，到底什么是逻辑大小，什么是物理大小呢?!具体可以看图，物理大小指的是除去 margin，也就是包含 border 以内的 box 大小，而逻辑大小，则是 box 通过 margin 解析规则解析后得到的大小(这或许可以解释为什么IE5会错误解析盒模型)。在上图中，box 的实际显示的宽度等于 box 的逻辑大小，而 box 实际显示的高度等于 box 的物理大小，这说明 box 实际显示的大小可能是 box 的逻辑大小，也可能是 box的 物理大小，规则到底是怎样的--

box 的实际大小 = box 的物理大小 + 正的 margin

这仅对元素本身有效，对于其后面的相关元素，他们则只以 margin 的逻辑大小为准则，进行布局。

有朋友反应，听得很迷糊，越看越不懂，如果你对具体的理解过程不感兴趣的话，那记住下面我总结的结论就可以了，XD

结论:

box 最后的显示大小等于 box 的 border 及 border 内的大小加上正的 margin 值。而负的 margin 值不会影响 box 的实际大小，如果是负的 top 或 left 值会引起 box 的向上或向左位置移动，如果是 bottom 或 right 只会影响下面 box 的显示的参考线。

由浅入深漫谈margin属性1的更多相关文章

  1. 由浅入深漫谈margin属性

    margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin 属性包括 margin-top, ma ...

  2. 你是否彻底了解margin属性？

    写css,你少不了与margin打交道.你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是m ...

  3. margin属性

    可以设置position:absolute/relative/fixed,通过调节top/bottom/left/right实现元素的定位,这样很好,但是有时候想通过margin来实现. 下面是mar ...

  4. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  5. ListView中item的最外层使用margin属性失效

    参考文章:http://stackoverflow.com/questions/16278159/why-linearlayouts-margin-is-being-ignored-if-used-a ...

  6. (九)学习CSS之margin属性

    参考: 所有浏览器都支持 margin 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 margi ...

  7. CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...

  8. 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题

    突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...

  9. IOS机型margin属性无效问题

    这个问题很多小伙伴都有遇到,这次本猿也遇到了,记录一笔. 结论:简单的解决办法margin换padding!如有误,请大神不吝赐教.在Chrome浏览器移动端测试iphone5,打开的也是没问题的(这 ...

随机推荐

  1. JAVA调用系统命令或可执行程序--返回一个Runtime运行时对象，然后启动另外一个进程来执行命令

    通过 java.lang.Runtime 类可以方便的调用操作系统命令,或者一个可执行程序,下面的小例子我在windows和linux分别测试过,都通过.基本原理是,首先通过 Runtime.getR ...

  2. Ubuntu 14.10 下安装navicat

    1 下载navicat,网址http://www.navicat.com.cn/download,我下载的是navicat111_premium_cs.tar.gz 2 解压到合适的位置 3 进入解压 ...

  3. postgreSQL初步使用总结

    一.安装 postgreSQL安装完成后会默认生成一个名为postgres的用户和一个名为postgres的数据库.可以使用自带的psql.exe工具来登录.其帮助信息如下 连接到本地的postgre ...

  4. Fractal Tree

    尝试使用递归方式实现一棵简单的分形树,给出初始点的坐标,在此基础上根据坐标轴旋转的规则计算出子树干与根节点的坐标关系,依次递归画出左子树干和右子树干,并提供一个递归的深度用于控制画的子树的数目. 在二 ...

  5. Git 的安装和创建版本库 。

    Git 的优点就不再多说了 .直接进入正题吧 . 安装Git 首先可以尝试输入 Git 看看有没有反映 . $ git The program 'git' is currently not insta ...

  6. BZOJ 3439 Kpm的MC密码

    倒着建trie,然后主席树来求子树第k大. #include<iostream> #include<cstdio> #include<cstring> #inclu ...

  7. JLOI 斯迈利的赌注

    直接高精度模拟,加上简单贪心 Program XJOI2263; ..] of longint; var a,b:arr; s1,s2:ansistring; i,j:longint; sum:int ...

  8. HDU 3357

    http://acm.hdu.edu.cn/showproblem.php?pid=3357 给出公司间的控股关系,问有多少组不合法数据,自己控股自己不合法,a控股b,b控股c,则a控股c 其实就是找 ...

  9. Smart210学习记录-----linux定时器

    1.内核定时器: Linux 内核所提供的用于操作定时器的数据结构和函数如下: (1) timer_list 在 Linux 内核中,timer_list 结构体的一个实例对应一个定时器 1 stru ...

  10. Http的请求的全过程

    http请求的详细过程 HTTP是一个应用层的协议,在这个层的协议,是一种网络交互需要遵守的一种协议规范. 1.连接:当输入一个请求时,首先建立一个socket连接,因为socket是通过ip和端口建 ...