内部 div 的边距影响外部 div答案

【问题标题】：Margin of inner Div affects outer div内部 div 的边距影响外部 div
【发布时间】：2013-12-30 22:38:17
【问题描述】：

我有三个这样的嵌套 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 上方有 10px 的绿色可见）。

【问题讨论】：

标签： css margin

【解决方案1】：

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

将float: left; 添加到#innerA，如下图所示： http://jsfiddle.net/7e2H5/10/

见：https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

【讨论】：

【解决方案2】：

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

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

这是 JSFiddle 上的 a demo。

我希望这会有所帮助！

【讨论】：

嗯，这似乎效果最好（目前）我担心这个会有副作用，因为当其他容器在里面时，容器会有不同的行为。但目前这是一个很好的解决方案。

【解决方案3】：

我会用#innera padding 替换#innerb 边距

【讨论】：

【解决方案4】：

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

我添加了padding: 1px 0；

刚刚找到这个：margin-top in a nested div

【讨论】：

所以如果不更改#innerA 就无法解决这个问题，对吧？什么乱七八糟..有什么情况下这甚至有意义吗？
接受了这个，因为它提供了很多关于为什么 css 会以这种方式运行的信息。 @sureshdeepak 的回答暂时解决了我的问题，但我想我以后必须再次更改。