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来修复它.