CSS页边距怪癖-请帮助我理解
在子元素（h2）上使用边距时，为什么它会将边距改为父元素（#框）？如果我将边距更改为填充，它将按预期工作。 有什么变化吗？或者我错过了什么？这是我的示例代码CSS页边距怪癖-请帮助我理解,css,margin,Css,Margin,在子元素（h2）上使用边距时，为什么它会将边距改为父元素（#框）？如果我将边距更改为填充，它将按预期工作。 有什么变化吗？或者我错过了什么？这是我的示例代码 <html> <head> <style> #box{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; height:200px; width:500px; background:red; box-shado
<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>
#盒子{
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
高度：200px；
宽度：500px；
背景：红色；
盒影：15px 15px 12px灰色；
-莫兹盒阴影：15px 15px 12px灰色；
-网络工具包盒阴影：15px 15px 12px灰色；
文本对齐：居中；
边际上限：0；
}
#框h2{
颜色：#fff；
文本阴影：2px 2px 2px#000；
边距顶部：75px；/*制作这个填充物会产生我认为可以通过边距实现的效果*/
高度：50px；
宽度：200px；
}
CSS3的乐趣
此外，如果任何人或每个人都可以分享他们的经验与保证金怪癖。THx我猜你误解了盒子模型。边距是外部的空间，即小部件周围的空间，而填充是内部的空间，即小部件外部边界与其内容之间的空间
你可能想看看这个盒子模型的图表，以供参考。我猜你误解了盒子模型。边距是外部的空间，即小部件周围的空间，而填充是内部的空间，即小部件外部边界与其内容之间的空间
您可能想看看这个盒子模型的图表，以供参考。我认为它工作正常。填充就是这样做的：它填充应用于它的元素。边距将元素彼此分隔开。因此，利润率正在发挥应有的作用。h2标签的位置是它应该位于的位置。给它一个边距会将它从根元素（在本例中是主体）推开。为了让它在父元素（box div）中移动，您必须将它相对于box元素定位，或者给它填充（只有一种方法，但不是最佳的）。我认为它工作正常。填充就是这样做的：它填充应用于它的元素。边距将元素彼此分隔开。因此，利润率正在发挥应有的作用。h2标签的位置是它应该位于的位置。给它一个边距会将它从根元素（在本例中是主体）推开。为了让它在父元素（box div）中移动，您必须将其相对于#box元素进行定位，或者给它填充（只有一种方法，但不是最佳的）。这是因为。我讨厌这个“特性”，但这就是您遇到的渲染“问题”的原因。规范摘录（重点是我的）：
- 如果框的顶部和底部边距相邻，则有可能
让利润率崩溃。在里面
在这种情况下，元素的位置
取决于它与
其页边距被删除的其他元素
崩溃了
- 如果元素的边距与其父元素的顶部折叠 边距，框的顶部边框边缘 定义为与 父母的
- 如果框的顶部和底部边距相邻，则有可能
让利润率崩溃。在里面
在这种情况下，元素的位置
取决于它与
其页边距被删除的其他元素
崩溃了
- 如果元素的边距与其父元素的顶部折叠 边距，框的顶部边框边缘 定义为与 父母的
- 这是因为。我讨厌这个“特性”，但这就是您遇到的渲染“问题”的原因。规范摘录（重点是我的）：