两个边距相互叠加的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的余量。但由于某种原因，只有5px的保证金。任何人都知道为什么？

http://jsfiddle.net/4JAdx/

Answer 1

它被称为保证金崩溃。在第一个.smallbox上添加一个底部边距来修复它：http://jsfiddle.net/y8cGe/。

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

Answer 2

默认情况下，display类型block（包括div）的元素具有可折叠的边距

more info

您可以使用display:inline-block或设置更大的底部边距：

margin: 5px 5px 10px 5px;

Answer 3

问题在于花车。

由于两个小方框都包含在浮动的<div>中，因此它们的边距在此<div>内会崩溃。