为什么孩子的边距不影响父母的身高？

Question

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

css lang-css prettyprint-override">.parent{ background: 
    black; 
}
.child{
    background: LightBlue;
    margin: 20px;
}

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

JSFiddle：http://jsfiddle.net/k1eegxt3/

默认情况下，子页边距不会分别影响父级高度和父级尺寸。通常，可以通过在父元素中添加边距可以“推”到的内容来轻松修复，例如，向父元素添加填充或边框

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

JSFIDLE（JSIDLE）：http://jsfiddle.net/fej3qh0z/

我想知道为什么会这样，而不仅仅是它是如何被修复的。

有人能解释一下，最好参考规范，为什么会这样？

Answer 1

添加显示：flex；到父元素中，根据需要调整flex方向、对齐和对齐，但边距随您的需要显示。

Answer 2

你要找的是所谓的边际崩溃。边距塌陷的一个原因是，空元素不会添加垂直边距空间，也会使元素间距均匀，而无需重置边距。

根据规范：

注意：块布局中的相邻边距可能会折叠。有关详细信息，请参阅CSS2§8.3.1折叠边距。此外，与碎片断点相邻的边距有时会被截断。有关详细信息，请参阅CSS碎片3§5.2断点相邻边距。

该引文中的第一个链接是：

在CSS中，两个或多个框的相邻边距（可能是同级的，也可能不是同级的）可以组合成一个边距。按这种方式合并的边距称为折叠边距，由此产生的合并边距称为折叠边距。

相邻的垂直边距塌陷，除了：

• 根元素框的边距不会折叠

您可以向父元素添加溢出属性来修复此问题（可以是自动的、隐藏的，也可以根据需要进行其他操作）。

JSFIDLE示例：http://jsfiddle.net/k1eegxt3/2/