关于margin的一些问题

引

在平时处理样式的过程中，会出现各种问题。比如：

• 包含在父元素中的子元素设置了浮动，子元素高度变化的时候父元素的高度没有随着变化，就是没有被撑高，父元素仍然是原来设置的那个高度
• 包含在父元素中的子元素，子元素的宽高没有设置，而是通过自身的margin值来根据父元素的大小来设置自身的宽高，但是实际上顶部的margin却跟父元素重叠在一起
• 元素明明设置成了块级，但是定义高度一直都不是想要的高度
• 跟相邻元素用margin隔开，但是实际上margin的值跟设定的不同。
• 在低版本浏览器中（ie6,7），block元素设置成inline-block后没有效

盒子模型

前面提的问题，基本上都是与css中的盒模型相关的。

Source: w3c

盒子的宽度

= margin-left + margin-right + border-left + border-right + padding-left + padding-right + width

盒子的高度

= margin-top + margin-bottom + border-top +border-bottom + padding-top + padding-bottom + height

注意：

• margin是透明的没有颜色，border默认与文字颜色一直，padding的颜色同元素的背景色。
• margin的垂直属性，也就是margin-top, margin-bottom，在inline的元素中不起作用。margin是可以有负值的。
• padding属性无论是在inline还是block元素中都会有效，不过padding是没有负值的。

Margin外边距

在box.html这里，其中inner跟outer的margin-top, margin-right发生了重叠，也就是子元素跟父元素的margin会发生重叠；outer的margin-bottom跟outer2的margin-top发生了重叠，也就是相邻元素的margin会发生重叠。

标准

在css2.1的标准是这么说的 （这里进入）

" In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin. "

在css中，两个或者更多（有可能是同辈或者是后辈）毗邻盒子的外边距会重叠形成一个单一的边距。这种方式生成外边距的方式称为坍塌（叠加），这个结果形成的外边距叫做坍塌（叠加）外边距。

简单分析一下：

发生外边距重叠的情况，首先是要两个盒子毗邻，它们的外边距才发生重叠。这里面说的毗邻指的是什么呢？后面有解释，是两个盒子在正常流中的毗邻。

标准里的不发生重叠的情况

水平方向上永远不会发生重叠。

垂直方向上，下列情况不会发生重叠：

• 根元素的外边距不会发生重叠
• 如果拥有"空隙clearance"（也就是除了clear:none以外的值）的元素的上下外边距毗邻，它的边距会跟毗邻的元素发生重叠，但是形成的重叠不会再跟父元素的底部外边距发生重叠。

什么是空隙clearance?

*(Clear's) Values other than 'none' potentially introduce clearance. （clear除了none以外的值可能产生空隙）

* Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.（空隙会抑制外边距坍塌，并且会表现为在外边距的顶部有一段空白。这是用来将元素垂直浮动的）

标准里发生重叠的情况

什么才是两个外边距毗邻呢（也就是怎样才会发生重叠）？

• 处于同一个块级格式上下文中的，同属正常流的块级盒子（这两个元素是没有脱离正常流的块级盒子，而且同在一个块级格式化上下文中）。
• 两个元素没有被line-box, clearance, padding, border分开。
• 两个元素都是垂直边缘毗邻，符合下列情况中的一种
  • 盒子的顶部外边距(margin-top)，和它的第一个处于正常流子元素的顶部外边距(margin-top)
  • 盒子的底部外边距(margin-bottom)，和它的下一个处于正常流中的兄弟元素的顶部外边距(margin-top)
  • 处于正常流中的最后一个元素的底部外边距(margin-bottom)，和它高度height为auto的父元素的底部外边距(margin-bottom)
  • 没有触发块级格式上下文，min-height为0，或者height为auto，以及没有处于正常流的子元素的盒子的margin-top,和margin-bottom

所谓的外边距坍塌，就是与另一个的外边距毗邻，只要是四个外边距中的任意一个即可。

注意：外边距坍塌会发生在任何的元素上，不单只是兄弟元素或者祖先元素。

上面的规则的意思就是（也就是具体规则）：

• 浮动盒子跟任意其他盒子的外边距不会叠加（即使是浮动元素跟它的正常流子元素）。
• 具有块级格式上下文的元素（就比如除overflow: visiable值之外的元素）跟它的处于正常流的子元素不会发生外边距叠加。
• 具有绝对定位的盒子的外边距不会发生叠加。（以及他们的正常流子元素）
• 行内块级（inline-block）盒子不会发生外边距叠加。（以及他们的正常流子元素）。
• 处于正常流的块级元素的底部外边距(margin-bottom)总是会跟他的下一个兄弟正常流的块级元素的顶部外边距(margin-top)叠加，除非这个兄弟元素有空隙(clearance).
• 正常流块级元素的margin-top会跟它的第一个正常流块级子元素的margin-top叠加，如果这个元素没有border-top，没有padding-top，以及它的子元素没有空隙(clearance)。
• 一个正常流的块级盒子若是height:auto或min-height:0，他的margin-bottom会跟最后一个正常流子元素的margin-bottom叠加，如果这个盒子没有padding-bottom或者border-bottom，并且子元素的margin-bottom没有跟有空隙(clearance)的margin-top叠加的话。
• 一个盒子如果min-height:0，没有border-top或border-bottom，也没有padding-top或padding-bottom，也没有包含一个line box，且height:0 或height: auto，那么他的外边距会叠加，所有正常流子元素的外边距都会叠加。

如果发生外边距叠加，这个产生的外边距的值是这两个外边距中最大的那个。如果有负的外边距，那么值就是用最大的负的外边距的跟最大的正的外边距的相加。如果没有正值外边距，那么就是绝对值的最大值减去0.

Demo

不发生重叠的情况

前面翻译了css2.1中关于margin发生重叠的各种情况。但是大部分的实际工作中，为了更好的更精准的进行布局，我们一般是要避免margin发生重叠的。前面也提到了，水平方向上的margin是永远不会重叠的，所以接下来通过实际操作来看一下如何避免毗邻的外边距重叠。

浮动盒子跟任意其他盒子的外边距不会叠加（即使是浮动元素跟它的正常流子元素）。

参考demo1, demo2

在demo1中，outer浮动，inner是outer的in-flow（正常文档流）的子元素，所以outer的margin与inner的margin没有发生重叠。

在demo2中，outer,outer2均设置了浮动，触发了BFC，所以outer和outer2的外边距不会叠加。

浮动其实是脱离正常的文档流了，发生重叠的三个条件都是在正常的文档流中触发的，而且float是会触发BFC的，所以浮动元素是不会发生重叠的。

具有块级格式上下文（BFC）的元素（就比如除overflow: visiable值之外的元素）跟它的处于正常流的子元素不会发生外边距叠加。

块级格式上下文（block formatting context，后文简称BFC）是css2.1里描述的，在css3里面描述成了flow root。浮动元素和position除了relative和static之外的值，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow除了visible之外的值，都会触发BFC，其他的后续再详细分析。

参考在demo1中的outer和inner。Outer触发了BFC，所以与子元素inner的外边距没有重叠。

具有绝对定位的盒子的外边距不会发生叠加。（以及他们的正常流子元素）

参考demo3。

绝对定位也是脱离了正常的文档流的，跟浮动一样，违背了触发外边距重叠的条件，所以绝对定位也是肯定不会发生外边距重叠的。

行内块级（inline-block）盒子不会发生外边距叠加。（以及他们的正常流子元素）。

参考demo4。

如果拥有"空隙clearance"（也就是除了clear:none以外的值）的元素的上下外边距毗邻，它的边距会跟毗邻的元素发生重叠，但是形成的重叠不会再跟父元素的底部外边距发生重叠。

参考demo5

如果父元素拥有border或padding，它的margin不会与子元素的发生重叠。

参考demo6

发生重叠的情况

如果拥有"空隙clearance"（也就是除了clear:none以外的值）的元素的上下外边距毗邻，它的边距会跟毗邻的元素发生重叠

参考demo5

处于正常流的块级元素的底部外边距(margin-bottom)总是会跟他的下一个兄弟正常流的块级元素的顶部外边距(margin-top)叠加，除非这个兄弟元素有空隙(clearance).

参考box

正常流块级元素的margin-top会跟它的第一个正常流块级子元素的margin-top叠加，如果这个元素没有border-top，没有padding-top，以及它的子元素没有空隙(clearance)。

参考box

*新问题，outer2有padding: 10px; 内部的span也有一个padding: 10px;但是span的padding-top跟outer2的padding-top重叠了诶。如果span没有定义padding-top的话，那就是没有重叠。这是个新问题，稍后看看padding的定义吧。

一个正常流的块级盒子若是height:auto或min-height:0，他的margin-bottom会跟最后一个正常流子元素的margin-bottom叠加，如果这个盒子没有padding-bottom或者border-bottom，并且子元素的margin-bottom没有跟有空隙(clearance)的margin-top叠加的话。

参考demo7。后半句，如果有子元素跟有clearance的元素叠加了的话，那么就不会跟父元素再发生叠加了，例如demo5.

一个盒子如果min-height:0，没有border-top或border-bottom，也没有padding-top或padding-bottom，也没有包含一个line box，且height:0 或height: auto，那么他的外边距会叠加，所有正常流子元素的外边距都会叠加。

参考demo7

margin-collapse基本上就是上述所说的了，看起来很多的样子，其实也没有那么复杂，平时用到margin的时候留点心就可以了。