CSS中外边距叠加问题

外边距叠加-情况一

：当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加

当两个或者多个垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

div{width: 100px;height: 100px;}
#div1{background-color: red;margin-bottom: 30px;}
#div2{background-color: yellow;margin-top: 20px;}

<div id="div1">div1</div>
<div id="div2">div2</div>

外边距叠加-情况二

：当一个元素包含在另一个元素中时(假设没有内边距或者边框将外边距分隔开)，它们的顶和底外边距也会发生重叠

body{border: 1px solid #ccc;}
#div1{width: 200px;height: 200px;background-color: red;margin-top: 30px;}
#div2{width: 100px;height: 100px;background-color: blue;margin-top: 20px;}

<div id="div1">
  <div id="div2">内部</div>
</div>

外边距叠加-情况三

：这是一个空元素，有外边距，但是没有内边距和边框，在这种情况下，顶外边距与底外边距就碰到了一起，它们就会发生叠加。

body{border: 1px solid #ccc;}
p{margin-top: 20px;margin-bottom: 20px;}

<p></p>

外边距叠加-情况四

：空元素，有外边距，但是没有内边距和边框，在这种情况下，顶外边距与底外边距就碰到了一起，它们就会发生叠加。

body{border: 1px solid #ccc;}
p{margin-top: 20px;margin-bottom: 20px;}

<p></p>
<p></p>

 空元素中已经叠加的外边距与另一个空元素的外边距发生叠加
这就是一系列空的段落元素占用的空间非常小的原因，因为它们的所有垂直外边距都叠加到一起，形成了一个很小的外边距。

外边距叠加-情况五

：这是几个段落组成的页面，外边距发生了叠加，段落之间的顶外边距和底外边距发生叠加，这样各处的距离就一致了。

body{border: 1px solid #ccc;}
p{margin-top: 20px;margin-bottom: 20px;}

<p>1</p>
<p>2</p>

特别注意;只有普通文档流中的块框的垂直外边距才会发生外边距叠加，行内框、浮动框或者绝对定位框之间的外边距不会发生叠加