在CSS中,元素的"边距"对其父级的"高度"没有影响？

Question

以下是片段(JSFiddle上的演示)

#inner {
    background-color: yellow;    
    margin-left: 50px;
    margin-bottom: 50px;
}
#outer {
    background-color: red;
}

<div id="outer">
    <div id="inner">
        test
    </div>
</div>

从演示中可以看出,#inner元素有一个margin-bottom.

我预计高度#outer将足够大,以包括#inner边距的轮廓.并且输出将在黄色条下方有一个红色条.

然而,我发现#outer虽然我添加了规则margin-bottom: 50px,但它的高度根本没有改变#inner.

有没有人有这个想法？有没有办法确保父母的内容区域足够大,以保持其子女边际的轮廓？

此外,除了提供黑客解决方案之外,如果答案可以包括一些解释或相关文档/文章的链接,那将是很好的.为什么保证金规则是这样设计的.

谢谢!

Answer 1

你看到的是崩溃的边际问题.

块的顶部和底部边距有时会合并(折叠)为单个边距,其大小是合并到其中的边距中的最大边距,这种行为称为边距折叠.

在这三种情况中,您的情况是父元素和子元素之间的边距折叠.

如果没有边框,填充,内联内容,高度,最小高度或最大高度将块的边距底部与其最后一个子节点的边距底部分开,则这些边距会崩溃.折叠的保证金最终在父母之外.

如果您在父母之后添加另一个元素,您div将看到边距最终在其之外.下面的代码段显示了折叠的边距:

#inner { background-color: yellow; margin-left: 50px; margin-bottom: 50px; }
#outer { background-color: red; }

<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>You can see the collapsed margin above this text outside of the parent div.</p>

以下是规范的参考:http://www.w3.org/TR/CSS21/box.html#collapsing-margins

如何解决这个问题？

解决方案在上面引用的参考文本中给出.只是套用其中任何一个你的父母div- ,border,padding,height,min-height或max-height.

解决这个问题的最简单方法是在外部添加边框div:

#outer { background-color: red; border: 1px solid gray; }

更好的是,将填充应用于父级div而不是内部的边距.

#outer { background-color: red; padding-bottom: 50px; }

例子:

小提琴(带边框):http://jsfiddle.net/abhitalks/rrtfhyky/1/

小提琴(带填充):http://jsfiddle.net/abhitalks/rrtfhyky/2/

片段(带填充):

#inner { background-color: yellow; margin-left: 50px; }
#outer { background-color: red; padding-bottom: 50px; }

<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>Some text that follows.</p>