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

这称为边距塌陷。这是符合规范的行为。 Read more about it.

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