两个具有边距的 div，其中只有一个似乎有边距答案

【问题标题】：two divs with margins on top of each other, only one of them seems to have a margin两个具有边距的 div，其中只有一个似乎有边距
【发布时间】：2014-07-18 06:37:31
【问题描述】：

我有这个代码：

<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/

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

啊！所以我刚刚开始设置边距 margin:0px 5px 10px 5px;这给了我我需要的东西 - 谢谢

【解决方案2】：

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

more info

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

margin: 5px 5px 10px 5px;

【讨论】：

【解决方案3】：

问题出在花车上。

由于两个小盒子都包含在一个浮动的<div> 中，它们的边距在这个<div> 内折叠。

【讨论】：