内的div余量影响外层div(Margin of inner Div affects outer d

我有三个嵌套的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上述可见10px的）。

Answer 1:

好像这是一个“保证金崩溃”的问题。 检查DEMO

我添加padding: 1px 0 ;

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

刚刚发现这一点： 在一个div嵌套边距

Answer 2:

这是有趣的，但我不会说，添加填充是一个比较合适的答案。

#innerA {
    width: 100%;
    height: 100%;    
    background: green;
    display: inline-block;
}

这里有一个演示上的jsfiddle。

我希望这有帮助！

Answer 3:

我会替换#innera填充#innerb保证金

Answer 4:

根据由Chris提供了Mozilla链路，增加浮体还可以防止边缘坍塌：

添加float: left; 到#innerA如本小提琴： http://jsfiddle.net/7e2H5/10/

请参阅： https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

文章来源: Margin of inner Div affects outer div