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