儿童保证金不影响父母身高

Question

对于一些人来说这可能是显而易见的,但我发现很难找到解决方案.

答案的注意事项:请跳转到"真实的问题",谢谢:)

但我发现它 - 它低于问题的描述:

问题:

在像这样的简单示例中,子边距不会影响父高度

HTML

<div class="parent">
    <div class="child">Some text...</div>
</div>

CSS

.parent{ background: black; }
.child{
    background: LightBlue;
    margin: 20px;
}

小提琴:http://jsfiddle.net/k1eegxt3/

解决方案:

非常简单,默认情况下,子边距一般不会影响父高度和父级维度,通过添加边距可以"推送"到父元素中的内容很容易修复,例如向父级添加填充或边框.

调整后的CSS:

.parent{ background: black; padding: 1px; /* PADDING ADDED */ }
.child{
    background: LightBlue;
    margin: 20px;
}

小提琴:http://jsfiddle.net/fej3qh0z/

真正的问题:

然而,我实际上想知道为什么这样做是这样的,而不仅仅是如何修复,
所以请,有人可以写一个解释这种行为的答案,并添加一些DOC参考？

非常感谢 :)

Answer 1

它被称为折叠边距.来自www.w3.org的文件:

6.2.利润率下降

某些相邻的边距合并形成单一边际.这些利润被称为"崩溃".如果没有非空的内容,填充或边界区域或间隙将边缘区分开,则边距相邻.

有关示例的更多信息:http://www.w3.org/TR/css3-box/#collapsing-margins

您可以添加overflow: auto;到父元素以解决此问题.

小提琴:http://jsfiddle.net/k1eegxt3/2/