内层div的边距影响外层div

Question

我有三个嵌套的 DIV 元素，如下所示：

<div id="outer">
    <div id="innerA">
        <div id="innerB">
            This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
            This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
        </div>
    </div>
</div>

#innerA的高度100%使其与 一样大#outer。#innerB的高度保持不变，auto因此它的高度与其内容一样高。现在，当我设置#innerB为margin-top: 10px例如时，我预计#innerB将获得相对于 的余量#innerA。相反，会发生的情况是，#innerA获得与 相关的余量#outer。

这怎么可能？看来这与box-sizing至少它无法通过这种方式修复无关。

这是 CSS：

#outer {
    width: 500px;
    height: 300px;
    background: yellow;
    overflow: auto;
}

#innerA {
    width: 100%;
    height: 100%;    
    background: green;
}

#innerB {
    margin-top: 10px;
    background: blue;
}

和小提琴：

http://jsfiddle.net/7e2H5/

（在这里，我希望绿色 DIV 适合黄色 DIV，并且在蓝色 DIV 上方可见绿色 DIV 10px）。

Answer 1

看起来这是一个“保证金崩溃”问题。检查演示

我已经添加padding: 1px 0;

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

刚刚发现这个：嵌套 div 中的 margin-top