html - 两个边距彼此重叠的 div，其中只有一个似乎有边距

Question

我有这个代码:

<div class="left bigbox"></div>
<div class="left">
    <div class="smallbox"></div>
    <div class="smallbox"></div>
</div>
<div class="left tallbox"></div>

.left{float:left}
.bigbox, .smallbox, .tallbox{margin:5px;background:#000;}
.bigbox{width:490px;height:370px;}
.smallbox{width:240px;height:180px;}
.tallbox{width:240px;height:370px;}

所以两个相互重叠的小盒子都有 5px 的边距。所以它们顶部和底部之间应该有 10px 的边距。但出于某种原因，只有 5 像素的边距。有人知道为什么吗？

http://jsfiddle.net/4JAdx/

Answer 1

这称为 margin 崩溃。在第一个 .smallbox 上添加底部边距以修复它:http://jsfiddle.net/y8cGe/ .

.smallbox:first-of-type {
    margin-bottom: 10px;
}