CSS 外边距叠加详解

CSS 外边距叠加有以下几种情形：

• 相邻（兄弟）元素的上下边距叠加
• 包含（父子）元素的上下边距叠加
• 元素自身的上下边距叠加

关于 CSS 外边距叠加的两个注意点：

• 只有上下边距才能发生叠加，左右边距不会发生叠加
• 只有在标准文档流中才能发生外边距叠加

下面依次看一下这些情况：

相邻（兄弟）元素的上下边距叠加

相邻元素之间的外边距会发生叠加，表现形式为一个元素的上边距和另一个元素的下边距叠加，叠加的结果为这两个边距中的最大值。

...
<style>
    div{
        height: 100px;
    }
    .top{
        background: red;
        margin-bottom: 50px;
    }
    .bottom{
        background: blue;
        margin-top: 100px;
    }
</style>
...
<div class="top">Top</div>
<div class="bottom">Bottom</div>
...

叠加结果：

相邻元素的外边距叠加.png

如果两个元素处于非标准文档流中，将不会发生叠加：

...
div{
    height: 100px;
    width: 100%;
    float: left;
}
.top{
    background: red;
    margin-bottom: 50px;
}
.bottom{
    background: blue;
    margin-top: 100px;
}
...

效果如图：

非标准文档流下外边距不叠加.png

包含（父子）元素的上下边距叠加

父子元素的外边距也会发生叠加，产生条件为：

• 元素是父子关系
• 父元素没有边框
• 子元素是标准文档流

...
.par{
    height: 100px;
    background: red;
    margin-top: 100px;
}
.son{
    height: 50px;
    background: blue;
    margin-top: 50px;
}
...
<div class="par">
    <div class="son"></div>
</div>
...

看下效果：

父子元素外边距叠加.png

可见子元素没有在父元素内部产生外边距，而是和父元素的外边距发生叠加了。
下边看一下不会发生边距叠加的两种情况。
1.父元素有边框
如果父元素有外边框，那么父子元素之间不会发生外边距叠加，子元素将在父元素内部产生外边距。

...
.par{
    height: 100px;
    background: red;
    margin-top: 100px;
    border: 1px solid #000;
}
.son{
    height: 50px;
    background: blue;
    margin-top: 50px;
}
...

父元素有边框时不会发生外边距叠加.png

此时如果继续增加子元素的外边距，其将脱离父元素，父元素不会被撑开：

...
.par{
    height: 100px;
    background: red;
    margin-top: 100px;
    border: 1px solid #000;
}
.son{
    height: 50px;
    background: blue;
    margin-top: 200px;
}
...

子元素边距增加，父元素不会被撑开.png

2.子元素是非标准文档流
如果子元素是非标准文档流，和父元素也不会发生边距叠加：

...
.par{
    height: 100px;
    background: red;
    margin-top: 100px;
}
.son{
    width: 100%;
    height: 50px;
    background: blue;
    margin-top: 50px;
    float: left;
}
...

子元素是非标准文档流.png

元素自身的边距叠加

元素自身边距叠加的产生条件为：

• 元素中没有内容（或内容也是空元素）
• 元素没有高度

上边的条件可以总结为：当元素是一个空元素时，其自身外边距会发生叠加。
空元素的外边距叠加有两种情况：

• 单个空元素进行外边距叠加
• 多个空元素之间进行外边距叠加

首先是单个空元素进行外边距叠加的情况：

...
div{
    margin-top:50px;
    margin-bottom: 100px;
}
...
<div></div>
<hr>
...

效果如图：

元素自身的外边距叠加.png

多个空元素之间也会发生叠加：

...
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div
...

看下效果：

多个空元素边距叠加.png

这就是为什么多个空元素所占的空间很小的原因。
如果多个元素之间边距不一致，叠加的结果以较大的边距为准：

...
div{
    margin-top:50px;
    margin-bottom: 100px;
}
div:nth-of-type(3){
    margin-bottom: 200px;
}
...

看下效果：

叠加结果多个空元素之间较大边距为准.png
如果第三个 div 再给一个 150 的上外边距，这些 div 叠加后距离水平线的距离还会增加吗？

...
div{
    margin-top:50px;
    margin-bottom: 100px;
}
div:nth-of-type(3){
    margin-top: 150px;
    margin-bottom: 200px;
}
...

看下效果：

增加一个较大的上外边距.png
可见结果并没有产生其他变化，这是因为空元素首先会进行自身的外边距叠加，再和其他空元素产生叠加，所以结果并无变化。
如果元素内部包含了空元素，那么仍然会有边距迭加的，这种情况会更加复杂一些，叠加的顺序为：

• 内部空元素先和自身进行边距叠加
• 内部空元素自身进行边距叠加后再和外部空元素进行边距叠加
• 外部空元素和其他的外部空元素进行边距叠加

看个简单的例子：

...
div{
    margin-top:50px;
    margin-bottom: 100px;
}
p{
    margin-bottom: 200px;
}
...
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<hr>
...

效果如下：

空元素内部包含空元素时的边距叠加.png
虽然这种情况较为复杂，但我们发现边距叠加的结果还是以空元素（外边空元素、内部空元素）间的较大边距为准。因此我们这里可以总结一下规律：多个空元素发生外边距叠加时，会首先进行自身的外边距叠加，叠加的最终结果以较大的外边距为准。适用于多个无子空元素或者有子空元素的空元素之间的边距叠加。

总结

本文总结了 CSS 中元素外边距叠加的几种形式以及发生的条件，其中空元素的外边距叠加的形式多一些，较为复杂，但本文也总结了一条统一适应的规律，可以拿来即用。还需要注意的是，外边距叠加这一现象只发生于标准文档流中。
希望本文能对大家产生帮助。

完。