要了解margin的一些知识

两个块级元素竖直之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者

嵌套盒子之之间的margin
子块的margin将以父块的content为参考

评论

2 楼 ludatong110 2011-06-28  

在W3C上看过相似的说法，不过现实中还没有碰到这种问题。。。

1 楼 int08h 2011-05-17  

margin collapse的概念并不止于上下2个元素的margin重叠后合并问题，可以试试这个
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>

<style>
  #a1 { height: 20px; margin-bottom: 20px; background: red; }
  #a2 { height: 0; overflow: hidden; margin: 30px 0; }
  #a3 { height: 20px; margin-top: 40px; background: green; }
</style>

可以看到，由于#a2没有高度，他的上下margin重合，又分别与#a1的下margin、#a3的上margin重合，因此最后4个margin合并，变成了总共40px的边距，这就是margin collapse的真正意义，所有相接的margin通通合并