转载
外边距折叠的几种情况：
1、当一个元素出现在另一个元素上面时，第一个元素的底外边距和第二个元素的顶外边距发生叠加，效果图如下：
PS：这里的元素特质块级元素，inline元素竖向margin无效，display为inline-block的元素触发了BFC也不会出现叠加，input，img之类的行内替换元素也不会叠加
image
2、当一个元素包含在另一个元素中时，他们的顶和底外边距也会发生叠加，如下图
image
3、外边距也可以和本身发生叠加，前提有三个：空元素，有外边距，无内边距/边框
PS：这条出现的情况比较难看直观的看出来，所以不太好理解
image
看下面两段代码：
<div id="emptyDiv" style="margin-top:30px;margin-bottom:20px">
</div>
<br>
<span id="spanA" style="background:green;">
通过chrome控制台可以看出，外边距并没有叠加</span>`
spanA的位置不是在emptyDiv下方50px的地方，而是30px的位置
image
<div id="emptyDiv" style="margin-top:10px;margin-bottom:20px"></div>
<span style="background-color: green;">通过chrome控制台可以看出，外边距并没有叠加</span>
此时spanA的位置就在emptyDiv下方20px的地方，因为上下边距叠加了
image
4、如果这个外边距遇到另一个元素的外边距，它还会发生合并，前提有四个：空元素，有外边距，无内边距/边框，存在多个元素
image
看两段代码：
<div id="emptyDiv" style="margin-top:30px;margin-bottom:20px"></div>
<div id="divB" style="margin-top:20px;margin-bottom:20px;height:20px;
background-color: #0E2D5F">
</div>
通过chrome控制台可以看出，divB被放置在emptyDiv下方30px的地方（只看这段你可能会认为是divB的上边距和emptyDiv的下边距叠加了，其实不是这样的），再结合下一段代码你就能完全明白了
<div id="emptyDiv" style="margin-top:30px;margin-bottom:20px"></``div``>`
<div id="divB" style="margin-top:50px;margin-bottom:20px;height:20px;
background-color: #0E2D5F"></div>
通过chrome控制台可以看出，divB被放置在emptyDiv下方50px的地方，如果用“divB的上边距和emptyDiv的下边距叠加了”理解，divB将被放置在80px的地方，事实上这里只显示出了50px，原因就是emptyDiv的上下边距发生的叠加。你也可以通过给emptyDiv加个边框，再去掉会明显看到divB位置的变化。
