Question

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

我有两个DIV，一个在另一个里面。在第一个DIV中，我设置了边距，使其位于页面顶部，居中。第二个DIV应位于第一个DIV内部，但顶部有50px的边距。但是，50px的保证金适用于父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的更多信息。

Answer 2

您可能想要设置mainWrapper的填充而不是margin。

padding:50px 0 0 0;

查看this description of the box model以查看边距和填充的差异。

Answer 3

你没有说你正在看哪个浏览器。对我而言，它在Firefox中可以正常工作。但是，我怀疑你在Internet Explorer中看到了这个问题。这可能是因为内部div没有应用hasLayout - 这通常是IE样式错误的原因。尝试将zoom：1添加到mainWrapper CSS声明中，看看是否有效。

CSS边距的奇怪行为

3 个答案: