孩子的边距不会影响父母的身高

对于某些人来说，这可能很明显，但是我发现很难找到解决方案。

回答者注意：请跳至“真实问题”，谢谢:)

但我发现了它-该问题的描述如下：

问题：

在这样一个简单的例子中，子边界不影响父母身高

的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参考吗？

非常感谢 ：）

这就是所谓的边际崩溃。来自www.w3.org的文档：

6.2。利润率下降

某些相邻的边距合并形成一个边距。这些利润被称为“崩溃”。如果没有非空内容，填充或边框区域或没有空格来分隔它们，则边缘将相邻。

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

你可以加 overflow: auto;到父元素来解决此问题。

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

添加显示：flex; 父元素可以调整弯曲方向，根据需要对齐和对齐，但要显示的边距则可以。