保证金不添加元素？

我有以下代码在这里保证金不添加元素？

<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的空间之间50像素的空间。

来源

2011-12-14 Human Love

它完美显示在所有流行的网络引擎。你探索哪一个？ – heximal 2011-12-14 18:10:02

这就是所谓的崩溃边缘。下面是凡人一个很好的文章：

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

而这里的规格为剩下的你：

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

简单来说，这个定义表明，当垂直边距两个元素相互碰触，只有边距值最大的元素的边距将被兑现，而具有较小边距值的元素的边距将被归零。

来源

2011-12-14 18:08:15 Filip

+1 - 伟大的答案！ – mrtsherman 2011-12-14 18:11:26

血腥地狱，谢谢，这种钝的行为是纯粹的邪恶，偷走了我生命中的一天 – valexa 2012-05-22 08:07:42

我不明白那是行不通的，但你只能得到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; }

来源

2011-12-14 18:06:02 Hristo

感谢您的帮助 – 2011-12-15 08:51:13

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

enter image description here

来源

2011-12-14 18:09:01 mrtsherman

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

来源

2011-12-14 18:10:22

我的建议是，你可以不加利润率h1或p标签，因为这些是所谓的inline Elements和CSS属性display它们的默认值是inline。所以你必须改变这display:block;，那么你应该能够添加边距和填充。

来源

2011-12-14 19:18:01

保证金不添加元素？

回答

相关问题