要理解margin的一些知识
要了解margin的一些知识
两个块级元素竖直之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者
嵌套盒子之之间的margin
子块的margin将以父块的content为参考
两个块级元素竖直之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者
嵌套盒子之之间的margin
子块的margin将以父块的content为参考
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通通合并
<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通通合并
2 楼
ludatong110
2011-06-28
在W3C上看过相似的说法，不过现实中还没有碰到这种问题。。。