1.概念
外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距
毗邻:1.两个或多个外边距没有被非空内容、padding、border或clear分隔开。2.margin都处于普通流中,即非浮动,非定位、非浮动元素。
在没有被分隔开的情况下,一个元素的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>
效果图:
分析:父元素的height不是auto,所以margin-bottom不会折叠,父元素的margin-bottom仍为50px,子元素margin-bottom为100px;margin-top发生折叠,折叠结果为100px,撑开最外层父元素的高。
示例代码:
<div style="border:1px solid red; width:100px;">
<div style="margin:50px 0; background-color:green; height:auto; width:50px;">
<div style="margin:20px 0;">
<div style="margin:100px 0;">B</div>
</div>
</div>
</div>
效果图:
分析:父元素的height为auto,所以margin-bottom会折叠,折叠后margin-bottom为100px;margin-top发生折叠,折叠结果为100px。
2.折叠后margin的计算
1)参与折叠的margin都是正值
margin都是正数,取其中margin较大的值为最终margin值
2)参与折叠的margin都是负值
margin都是负值,取其中绝对值较大的,然后从0开始负向位移
实例代码:
<div style="height:100px; margin-bottom:-75px; width:100px; background-color: yellow;">A</div>
<div style="height:100px; margin-top:-50px;margin-left:30px; width:100px; background-color: skyblue;">B</div>
效果图:
3)参与折叠的margin中有正值有负值
有正有负,取出负margin中绝对值最大的,然后和正margin值最大的相加
示例代码:
<div style="height:100px; margin-bottom:100px; width:100px; background-color: yellow;">A</div>
<div style="height:100px; margin-top:-50px;margin-left:30px; width:100px; background-color: skyblue;">B</div>
效果:
4)相邻的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>
多个margin折叠成一个margin,取所有相关的值一起计算。计算A、B之间的margin折叠,将6个margin一起计算
正值:50px,150px,200px,最大正值为200px
负值:-60px,-100px,-120px,绝对值最大的是-120px
最终折叠后的margin应该是200+(-120)=80px;
效果图:
3.浮动元素、inline-block元素、绝对定位元素的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>
效果图
4.创建块级格式化上下文的元素,不和它的子元素发生margin折叠
示例代码:
<div style="margin-top:50px; width:100px; height:100px; background-color:green;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>
效果:
利用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>
效果图:
5.元素自身的margin-bottom和margin-top相邻与会折叠
元素自身的margin-bottom和margin-top相邻,只能是内容为空,且垂直发方向上border和padding为0
实例代码:
<div style="border:1px solid red; width:100px;">
<div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>
效果图: