首先回顾一下margin的特性:
- margin’ 是 ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ 的简写,表明 margin 的大小范围。 它的值可以是 宽度值、百分比值或 ‘auto’ 这3者之一,注意:宽度值必须带有单位。
- 适用范围,margin 非 table 类型的元素,以及 table 类型中 table-caption, table 和 inline-table 这3类不适用,例如 td th tr 等,margin 是不适用的
- 对于行内非替换元素(例如 span),垂直方向的 margin 不起作用。
- 垂直方向上的不同元素的相邻的 margin 在某些情况下,会发生折叠的现象。
现在重点来看下外边据折叠的情况。
外边距折叠( Collapsing margins )
Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。
其中所说的 margin 毗邻,可以归结为以下两点:
- 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
- 这些 margin 都处于普通流中2。
下面详细的介绍其规则。
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
“两个或多个”
说明其数量必须是大于一个,又说明,折叠是元素与元素间相互的行为,不存在 A 和 B 折叠,B 没有和 A 折叠的现象。
毗邻
是指没有被非空内容、padding、border 或 clear 分隔开,说明其位置关系。
在没有被分隔开的情况下,一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻;
只有在一个元素的 height 是 “auto” 的情况下,它的 margin-bottom
才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。
例如:
<div style="border:1px solid red; width:100px;">
<div style="margin:50px 0; background-color:green; height:50px; width:50px;">
<div style="margin:20px 0;">
<div style="margin:100px 0;">B</div>
</div>
</div>
</div>
以上代码中,margin 会把 B 的包含块撑开。
如果一个元素的 height 特性的值不是 auto,那么它的 margin-bottom 和它子元素的 margin-bottom 不算相邻,因此,不会发生折叠。 margin-top 没有此限制,所以是 100px,margin-bottom 没有折叠,只有 50px。
垂直方向
只有垂直方向的 margin 才会折叠,水平方向的 margin 不会发生折叠的现象。
计算方式
参与折叠的 margin 都是正值
<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>
在 margin 都是正数的情况下,取其中 margin 较大的值为最终 margin 值。即上例中A,B之间的margin值是100px。
参与折叠的 margin 都是负值
<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div>
<div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>
当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0 位置,负向位移,所以上例中A,B垂直方向上重叠75px。
参与折叠的 margin 中有正值,有负值
如果,毗邻的 margin 中有正值,同时存在负值会怎样呢?有正有负,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。
<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>
上面的例子最终的 margin 应该是 100 + (-50) = 50px。
复杂的层级元素
相邻的 margin 要一起参与计算,不得分步计算。
要注意,相邻的元素不一定非要是兄弟节点,父子节点也可以,即使不是兄弟父子节点也可以相邻。
而且,在计算时,相邻的 margin 要一起参与计算,不得分步计算。
<div style="margin:50px 0; background-color:green; width:50px;">
<div style="margin:-60px 0;">
<div style="margin:150px 0;">A</div>
</div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
<div style="margin:-120px 0;">
<div style="margin:200px 0;">B</div>
</div>
</div>
错误的计算方式:算 A 和 B 之间的 margin,分别算 A 和其父元素的折叠,然后与其父元素的父元素的折叠,这个值算出来之后,应该是 90px。依此法算出 B 的为 80px;然后,A和B折叠,margin 为 90px。
要注意的是,多个 margin 相邻折叠成一个 margin,所以计算的时候,应该取所有相关的值一起计算,而不能分开分步来算。
- 正值:50px,150px,200px
- 负值:-60px,-100px,-120px
根据有正有负时的计算规则,正值的最大值为 200px,负值中绝对值最大的是 -120px,所以,最终折叠后的 margin 应该是 200 + (-120) = 80px。
不会触发折叠的情况
浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
浮动元素的 margin 在垂直方向上也不会发生 margin 折叠,即使和它相邻的子元素也不会。
<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>
两个绿色的块儿之间,相距100px,而若 B 和它的浮动包含块发生 margin 折叠的话,金色的条应该位于绿色块的最上方,显然,没有发生折叠。
创建了块级格式化上下文的元素,不和它的子元素发生 margin 折叠
例如,设置”overflow : hidden”:
<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>
特别的
元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
自身 margin-bottom 和 margin-top 相邻,只能是自身内容为空,垂直方向上 border、padding 为 0。