CSS中外边距叠加问题

外边距叠加-情况一

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

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

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

[html] view plain copy

1. <div id="div1">div1</div>  
2. <div id="div2">div2</div> 

外边距叠加-情况二

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

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

1. <div id="div1">  
2.   <div id="div2">内部</div>  
3. </div>  

外边距叠加-情况三

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

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

[html] view plain copy

1. <p></p>  

外边距叠加-情况四

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

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

[html] view plain copy

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

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

外边距叠加-情况五

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

[css] view plain copy

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

[html] view plain copy

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

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