Css 内部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>

还有小提琴：

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

似乎这是一个“边距崩溃”问题。检查

我添加了

填充：1px0

更多信息：

---

刚刚发现：

我会用#innera padding替换#innerb margin

这很有趣，但我不会说添加padding是更合适的答案

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

这是关于JSFIDLE的

---

我希望这有帮助

根据Chris提供的Mozilla链接，添加浮动也可以防止边距崩溃：

添加<代码>浮动：左至

#innerA

，如本小提琴所示：

---

请参阅：

因此，如果不更改

#innerA

就无法解决此问题，对吗？真是一团糟。。在任何情况下，这都是有意义的吗？接受这一点，因为它提供了很多关于css为什么会这样做的信息。@sureshdeepak的答案暂时解决了我的问题，但我想我以后必须再次更改。嗯，这似乎效果最好（目前），我担心这会有副作用，因为当其他容器在里面时，容器会有不同的行为。但就目前而言，这是一个很好的解决方案。

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