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相关的保证金。

这怎么可能？这似乎与#outer { width: 500px; height: 300px; background: yellow; overflow: auto; } #innerA { width: 100%; height: 100%; background: green; } #innerB { margin-top: 10px; background: blue; }无关，至少它不可修复。

这是CSS：

{{1}}

和小提琴：

http://jsfiddle.net/7e2H5/

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

Answer 1

似乎这是一个“边缘崩溃”的问题。查看DEMO

我添加了padding: 1px 0;

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

刚刚发现：margin-top in a nested div

Answer 2

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

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

这是JSFiddle上的a demo。

我希望这有帮助！

Answer 3

我会用#innera padding替换#innerb margin

Answer 4

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

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

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

内部Div的边缘影响外部div

4 个答案: