Question

在子元素（h2）上使用margin时，为什么它会为父元素（#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>

如果任何人或每个人都可以分享他们的边缘怪癖经验。 THx的

Answer 1

这是因为collapsing margins。我讨厌这个“功能”，但这就是你所呈现的“问题”的原因。摘录自规范（重点是我的）：

如果框的顶部和底部边距相邻，则可以   边距崩溃通过它。在   这种情况下，元素的位置   取决于它与...的关系   边缘正在存在的其他元素   折叠。


如果元素的边距与其父级的顶部折叠   边距，框的顶部边框边缘   被定义为与。相同   父母的。

以下是关于此主题的几篇文章：

Answer 2

我的猜测是你误解了盒子模型。边距是外面的空间，即在小部件周围，而填充是内部空间，即小部件的外边界及其内容之间的空间。

您可能需要查看此图表：框架模型的http://www.w3.org/TR/CSS2/box.html以供参考。

Answer 3

我认为它运作正常。填充就是这样：它填充它所应用的元素。保证金将元素彼此分开。因此保证金正在按预期运作。 h2标签的位置应该是它的位置。给它一个保证金将使它远离根元素，在这种情况下是根元素。为了让它在父元素（#box div）中移动，你要么必须相对于#box元素定位它，要么给它填充（只有一个方法，但不是最优的）。

CSS边缘怪癖 - 请帮我理解

3 个答案: