外边距折叠

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:20px; 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>

效果图:

转载于:https://www.cnblogs.com/lee1993/p/6828081.html