边缘顶部设置的嵌套div导致滚动条出现

Question

假设我有这个小HTML片段:

<div id="outer">
    <div id="inner">
        <div id="inner2">foo bar</div>
    </div>
</div>

我也定义了这些样式:

#outer {
    height:100px;
    overflow:auto;
    background-color:#EEE;
}
#inner {
    height:100px;
    background-color:#AAA;
}
#inner2 {
    margin-top:5px;
}

使用此设置,滚动条显示outerdiv:

为什么嵌套的内部div会导致出现此滚动条？

我可以通过删除margin-top规则删除滚动条,但这会导致副作用.

这是一个重现问题的jsfiddle:http://jsfiddle.net/stevebeauge/PTA85/

[编辑]:我的实际问题通过替换margin-top来解决padding-top,但我正在寻找解释,而不仅仅是解决方案.

Answer 1

这是因为边距正在崩溃.

Box Model 8.3.1折叠边距

在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合形成单个边距.据说以这种方式组合的边距会崩溃,因此产生的合并边距称为折叠边距.

当两个或多个边距折叠时,生成的边距宽度是折叠边距宽度的最大值.在负边距的情况下,负邻接边距的绝对值的最大值从正邻接边距的最大值​​中减去.如果没有正边距,则从零中扣除相邻边距的绝对值的最大值.

可能的解决方法:

用填充替换边距(示例).

添加overflow:auto到#inner (示例)

浮动#inner2 (示例)

将显示#inner2从更改block为inline-block (示例)

有关其他信息,请参阅可视格式化模型 - 块格式化上下文.