上下外边距塌陷的几种情况

转载
外边距折叠的几种情况：
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位置的变化。