HTML

Question

我有以下内容：

CSS

#pageBody
{
    height: 500px;
    padding:0;
    margin:0;
    /*border: 1px solid #00ff00;*/
}

#pageContent
{
    height:460px;
    margin-left:35px;
    margin-right:35px;
    margin-top:30px;
    margin-bottom:30px;
    padding:0px 0 0 0;
}

HTML

    <div id="pageBody"> 
    <div id="pageContent"> 
        <p> 
        blah blah blah
        </p> 
    </div> 
    </div>

如果我取消注释pageBody中的边框线，一切都很合适......我有边框来验证事情是否符合预期。但删除边框，pageBody下拉页面大约20px，而pageContent似乎根本没有移动。

现在这不是真正的页面，而是一个子集。如果没有什么是显而易见的，我可以尝试生成一个有效的最小样本，但我认为可能会有一个简单的快速回答。

我在Chrome和IE8中看到了同样的问题，这表明我不是浏览器。任何提示在哪里看？我想知道也许1px边框是一个临界点使得div的内容太大了，但是将#pageContent高度改为例如400没有区别，除了剪掉底部的div。

Answer 1

显然，当您向pageBody添加边框或边距时，pageContent的顶部会计算为pageBody.border + pageBody.margin + pageContent.margin-top。否则它似乎忽略了pageContent.margin-top。

这是margin collapsing

的典型案例

Answer 2

边距正在崩溃（可见#pageBody红色背景和#pageContent蓝色背景。）

那就是：因为两者都是块元素并且边距是触及的，它们会一起折叠，而较大的元素会保持有效如果两个边距之间有任何边框或填充，则它们不会相邻，因此不会崩溃。

预期行为：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 3

尝试在你的div上设置position: relative; ...之前我已经修复了类似的问题。

奇怪的CSS行为...删除1px边框使<div>移动大约20px </div>

CSS

HTML

3 个答案: