顶部的一个div具有下外边距，位于另一个具有上外边距的div上方，只有一个外边距。

Question

5

我有两个div，一个在另一个上方。顶部的div使用了margin-bottom:10px, 底部的div使用了margin-top:10px, 但是它们之间只有10像素的空间。

实时示例：http://jsbin.com/efugok/1/edit HTML代码及CSS：

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

Rendered:

enter image description here

- Ian Davis

3

那就是外边距折叠：http://www.w3.org/TR/CSS2/box.html#collapsing-margins - tuff

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madara's Ghost · Accepted Answer

那被称为边距折叠。这是一种按规范的行为。了解更多。基本上，当两个垂直边距重叠时，只有最大的边距会被考虑在内。给任何一个元素添加 20px 的边距来修复它。