保证金不添加元素？

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之间留出50px的空间，但它没有获得50px的空间。

Answer 1

它被称为崩溃的边缘。这是凡人的好文章：

http://reference.sitepoint.com/css/collapsingmargins

以下是其他人的规格：

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

  

简单来说，这个定义表明当两个元素的垂直边距接触时，只有具有最大边际值的元素的边缘将被尊重，而具有较小边缘值的元素的边缘将被折叠。为零。

Answer 2

如果您使用Chrome开发者工具之类的东西，您可以在元素上单击鼠标右键，并可以看到元素的盒子模型。请参阅这些屏幕截图以供参考。我认为一旦你看到视觉效果，答案就会变得清晰。问题是边缘崩溃。

Answer 3

我不知道这是怎么回事......但你只能获得30px的保证金。较大的保证金优先。您也可以尝试将它们包装在<div>个元素中，并为两个元素中的一个分配50px的边距。

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; }

Answer 4

我相信你没有得到预期结果的原因是因为你已经给h1元素一个30px的边距底部，p元素已经有一个高于它的边距等于30px，所以告诉它有20px的保证金顶部什么也没做。尝试给p元素一个40px的上限，并观察它们之间的差距增加10px。