css - CSS 边距的奇怪行为

Question

我的这个页面非常简单，这应该是一件轻而易举的事，但我很难过。

我有两个 DIV，一个在另一个里面。在第一个 DIV 中，我设置了页边距，使其位于页面顶部居中。第二个 DIV 应该放在第一个里面，居中，但顶部有 50px 的边距。但是，50 像素的边距应用于父 DIV 而不是子 DIV。如果我向父 DIV 添加边框，它的行为就像我期望的那样，但并非没有。

任何人都可以给我任何见解吗？提前致谢。

<div id="pageWrapper">
    <div id="mainWrapper">
    <p>foo</p>
     </div>
</div>

*{
    margin:0px;
    padding:0px;    
}
body{
    background-color:#034375;
}
#pageWrapper{
    width:960px;
    margin:0px auto 0px auto;
    background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
    width:500px;
    margin:50px auto 0 auto;    
    border:1px solid #000000;
    background-color:#eeeeee;
}

Answer 1

这个问题与渲染相邻边距的 CSS 规范有关。本质上，因为包含 div 的边距和内部 div 的边距“之间”没有任何内容，所以两者都使用较大的值。

您将主要在 Firefox 中看到这种情况，尽管这种行为似乎符合法律条文，但我不确定这种特殊情况是否符合规范编写者的预期。

幸运的是，它很容易修复——在边距“之间”放置一些东西。您已经注意到在父 div 上放置边框是有效的。您可以使此边框透明，并将内边距减少 1px，它在功能上与上述情况相同。另一种选择是将 padding-top 的一个像素应用于父 div。第三种选择是在父 div 上使用 padding-top: 50px，而不是将上边距应用到子 div。

有关 collapsing margins 的更多信息.