请注意答案：请跳到“真正的问题”，谢谢:)

但是我发现它 – 这是下面的问题的描述：

问题：

在这样的简单示例中，子边距不影响父高

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

非常感谢 ：)