0

在子元素(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>

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

4

3 回答 3

7

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

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

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

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

于 2009-11-05T20:02:02.947 回答
0

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

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

于 2009-11-05T19:51:41.993 回答
-2

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

于 2009-11-05T19:56:46.647 回答