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

【问题标题】：CSS margin quirks - please help me understandCSS边距怪癖-请帮助我理解
【发布时间】：2009-11-06 04:07:42
【问题描述】：

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

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

【问题讨论】：

您是在使用文档类型还是只是在示例中省略了它？
省略。对于这个例子来说，拥有一个并没有什么不同。
对于那些不知道这一点或关注问题的人。向#box 添加 1px 的 padding-top 可以让 h2 上的 margin-top 与 padding 一样工作。

标签： css margin

【解决方案1】：

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

如果一个盒子的上边距和下边距是相邻的，那么它是可能的让边距折叠通过它。在这种情况下，元素的位置取决于它与其他元素的边距正在崩溃了。

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

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

【讨论】：

【解决方案2】：

我猜你误解了盒子模型。 Margin 是外部的空间，即小部件周围，而 padding 是内部的空间，即小部件的外边框与其内容之间的空间。

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

【讨论】：

在示例中提供的 h2 是一个孩子或#box。 h2 应该独立于#box，因此有自己的边距与#box 分开。

【解决方案3】：

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

【讨论】：

相对于#box div 的位置是什么意思？ h2 在#box div 内。那不应该让它的根元素成为#box吗？