内层div的边距影响外层div

我有三个嵌套的 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/ http://jsfiddle.net/7e2H5/

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

看起来这是一个“保证金崩溃”问题。检查DEMO http://jsfiddle.net/7e2H5/

我已经添加padding: 1px 0;

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

刚刚发现这个：嵌套 div 中的 margin-top https://stackoverflow.com/questions/2890354/margin-top-in-a-nested-div