元素的边距为什么没有添加？

Question

我有以下代码。

<h1>Test</h1>
<p>Another test</p>
h1
{
border:2px solid red;
margin-bottom:30px;
}
p
{
border:2px solid red;
margin-top:20px;
}

这里有一个实时的代码编辑器 http://tinkerbin.com/dnhA713P

我想要在h1和p之间加上50像素的空白，但是它没有产生50像素的空白。

- Ali Nouman

---

它在所有流行的网络引擎中都能完美显示。你探索哪一个？ - heximal

Answer 1

它被称为折叠边距。这里有一篇适合普通人的好文章：http://reference.sitepoint.com/css/collapsingmargins。而对于其它人，这里是规范说明：http://www.w3.org/TR/CSS2/box.html#collapsing-margins。简单地说，当两个元素的竖向边距相接触时，只会考虑较大的边距值，而较小的边距将会被合并为0。

- Filip

---

该死，谢谢，这种晦涩的行为真是太邪恶了，它偷走了我一天的时间。 - valexa

Answer 2

如果您使用类似Chrome开发者工具的东西，您可以在元素上右键单击，并获取元素的盒模型可视化。请参考这些屏幕截图。我认为一旦您看到这些可视化效果，答案就会变得清晰明了。问题是折叠边距。

- mrtsherman

Answer 3

我相信你没有得到期望的结果是因为既然你已经给h1元素一个30像素的margin-bottom，那么p元素上方已经有了等于30像素的margin，所以告诉它有一个20像素的margin-top不起作用。试试给p元素一个40像素的margin-top，看看它们之间的margin增加了10像素。

- Nick Rolando

---

啊，猜想这是一个已知的东西，“折叠边距”，来自其他答案。好问题，这很有用。 - Nick Rolando

Answer 4

我不明白为什么这样不起作用...但你只会得到30像素的边距。更大的边距优先级更高。你也可以尝试将它们包装在<div>元素中，并将50像素的边距分配给其中之一。

http://jsfiddle.net/LuDvL/

<div id="header">
    <h1>Test</h1>
</div>

<div id="content">
    <p>Another test</p>
</div>

/* either one of these should work */
#header { margin-bottom: 50px; }
#content { margin-top: 50px; }

- Hristo