边缘顶部设置的嵌套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;
}

使用此设置，滚动条会显示outer div：

为什么嵌套的内部div会导致显示滚动条？

我可以删除margin-top规则删除滚动条，但这会导致副作用。

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

[edit] ：我的实际问题是通过将margin-top替换为padding-top来解决的，但我正在寻找解释，而不仅仅是解决方案。

Answer 1

这是因为margins are collapsing。

  

Box Model 8.3.1 Collapsing margins

     

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

     

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

可能的解决方法：

用填充(example)替换边距。

将overflow:auto添加到#inner (example)

浮动#inner2 (example)

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

有关其他信息，请参阅可视化格式模型 - Block formatting contexts。