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

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.

这是保证金崩溃的典型案例