在子元素（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>
还有任何人或每个人都可以与保证金怪癖分享他们的经验。谢谢
最佳答案
这是因为collapsing margins。我讨厌这个“功能”，但这就是渲染您遇到的“问题”的原因。规格摘录（重点是我的）：
如果框的顶部和底部边距相邻，则有可能
利润会因此崩溃。在
在这种情况下，元素的位置
取决于它与
其他元素的边距正在
崩溃了。
如果元素的边距以其父元素的顶部折叠
边距，框的顶部边框边缘
被定义为与
父母。
以下是有关此主题的几篇文章：
http://reference.sitepoint.com/css/collapsingmargins
http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php