css - div 在另一个 div 顶部有边距底部，边距顶部只有 1 个边距

Question

我有一个 div 在另一个之上。顶部 div 有margin-bottom: 10px，底部 div 有margin-top: 10px，但两个 div 之间只有 10px 的空间。

现场示例：http: //jsbin.com/efugok/1/edit

带有 Css 的 HTML：

<div style="margin-bottom:10px; background: #e6e6e6;" id="one">one</div>
<div style="margin-top:10px; background: #ccc" id="two">two</div>

渲染：

Answer 1

这称为保证金崩溃。这是符合规范的行为。阅读更多关于它的信息。

基本上，当 2 个垂直边距重叠时，只考虑最大的一个。给任何元素一个边距20px来修复它。