外边距合并

一、概念

• 外边距合并：

两个不同变迁元素的边距发生了合并，即两个合并成了一个，显示边距大的。

二、垂直方向上的合并

两个垂直方向上的外边距相遇时，会合并成一个外边距。合并后的外边距为发生合并的两个外边距中较大者

代码：

效果：


两个图片对比可以看出，两个元素之间的距离与.son2 的margin-top距离相等，这就是垂直方向上的外边距合并

三、包含外边距的合并

如果元素B包含在元素A内，并且元素A没有设置border的时候，当两个元素垂直方向上margin相遇，也会发生外边距的合并

代码：

效果：
.son1与.father之间不存在距离，.son1的margin-top存在与容器外面

.father的margin-top较大，.father与.son1的外边距合并，只显示.father的margin-top

注意：

• 只有垂直反向上才会发生外边距的合并
• 包含外边距的合并如果发生，则容器没有设置border

四、空盒子的上下外边距合并

有一个空盒子，没有设置尺寸，导致它的上下外边距相遇，那么该元素的上下边距会分别与上下相邻元素合并，之后的合并结果再进行合并。

代码：

效果：
.son1与.son2之间的距离会取 三者垂直方向上外边距距离的最大值

四、清除合并

1、外边距合并书写

两个元素之间需要多少距离，在其中一个元素上完成就好

2、包含外边距的清除合并

• 在父元素上设置padding属性
• 在父元素上设置透明的border属性

代码：

效果：