div在另一个div顶部有保证金底部，保证金最高，只有1个保证金

Question

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

实例：http://jsbin.com/efugok/1/edit

Html with Css：

<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的边距来修复它。