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

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/

Answer 2

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