css - CSS边距怪癖-请帮助我理解

Question

在子元素（h2）上使用边距时，为什么它给父元素（#box）提供边距？如果我将边距更改为填充，它会按预期工作。有什么改变还是我错过了什么？这是我的示例代码

<html>
<head>
<style>
#box{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
height:200px;
width:500px;
background:red;
box-shadow: 15px 15px 12px grey;  
-moz-box-shadow: 15px 15px 12px grey;  
-webkit-box-shadow: 15px 15px 12px grey;  
text-align:center;
margin-top:0;
}
#box h2{
color:#fff;
text-shadow: 2px 2px 2px #000;
margin-top:75px;/*making this padding gives the effect I thought I could achieve with margin*/
height:50px;
width:200px;
}
</style>
</head>

<body>
<div id="box">
<h2>Fun with CSS3</h2>
</div>
</body>
</html>

如果任何人或每个人都可以分享他们的保证金怪癖经验。谢谢

score 7 · Accepted Answer

这是因为利润率下降。我讨厌这个“功能”，但这就是您遇到的渲染“问题”的原因。规范的摘录（重点是我的）：

如果盒子的顶部和底部边距相邻，则边距可能会通过它折叠。在这种情况下，元素的位置取决于它与边距被折叠的其他元素的关系。

如果元素的边距与其父元素的上边距折叠在一起，则框的上边框边缘被定义为与父元素的相同。

这里有几篇关于这个主题的文章：

score 0 · Accepted Answer

我的猜测是你误解了盒子模型。边距是外部空间，即围绕一个小部件，而填充是内部空间，即在小部件的外边框与其内容之间。

你可能想看看这个盒子模型的图表： http ://www.w3.org/TR/CSS2/box.html 以供参考。

score -2 · Accepted Answer

我认为它工作正常。填充就是这样做的：它填充它应用到的元素。边距将元素彼此分开。因此，保证金正在发挥应有的作用。h2 标签的位置是它应该在的位置。给它一个边距会将它推离根元素，在这种情况下是主体。为了让它在父元素（#box div）中移动，您必须相对于#box 元素定位它，或者给它填充（只是一种方法，但不是最佳方法）。

css - CSS边距怪癖-请帮助我理解

3 回答 3

Related

Reference