解决外边距重叠

一、外边距重叠

---

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

换句话说，外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。

margin值重叠计算的方法：

1. margin值都为正，取两者的最大的值。
2. 出现负边界，用最大的正边界减去绝对值最大的负边界。
3. 如果没有正边界，则从零中减去绝对值最大的负边界。

有两种重叠情况：相邻的兄弟盒子，嵌套父子盒子

.box1{width:100px; height:100px; background:black; margin-bottom:100px;}
.box2{width:100px; height:100px; background:black; margin-top:50px;}

<div class="box1"></div>
<div class="box2"></div>	

                                                          

.box1{width:100px; height:100px; background:black;}
.box2{width:200px; height:200px; background:black;}
.son{width:100px; height:100px; background:yellow; margin:50px;}

<div class="box1"></div>
<div class="box2">
	<div class="son"></div>
</div>	

 

                                                             

注：当父子容器的外边距重叠时，重叠后的边距会应用到父容器上。
 

二、意义

---

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

 

三、解决方案

---

虽然外边距的重叠有其一定的意义，但有时并不适合某些布局设计，有如下的解决建议：

 

相邻垂直的兄弟盒子：

• 只设置一个盒子的外边距

 

父子盒子外边距重叠：

1、将父盒子或子盒子设计为BFC容器（overflow只能设置在父盒子上）

• float 除 none 以外的值
• position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

2、将父子盒子的margin值隔离

• 给父盒子设置padding、border：1px