为什么 child 的边距不影响 parent 的高度？

Question

在这个简单的例子中，child 边距不影响 parent 高度：

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

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

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

默认情况下，child 边距不会分别影响 parent 高度 parent 一般尺寸，很容易 通过添加边距可以“推动”的东西来修复" 到 parent 元素中的 ，例如向 parent 添加填充或边框。:

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

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

我想知道为什么这是这样工作的，而不仅仅是它是如何固定的。

谁能解释一下，最好是参考规范，为什么这样工作？

Answer 1

您要找的是 collapsing margins。边距折叠的原因之一是空元素不添加垂直边距 space 并且均匀 space 元素而不需要重置它们的边距。

来自specification:

3. Margins

Note: Adjoining margins in block layout can collapse. See CSS2§8.3.1 Collapsing Margins for details. Also, margins adjoining a fragmentation break are sometimes truncated. See CSS Fragmentation 3 §5.2 Adjoining Margins at Breaks for details.

该引用中的第一个 link 是这样的：

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse, except:

Margins of the root element's box do not collapse.

If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

您可以向父元素添加 overflow 属性来解决此问题（auto、hidden 或其他内容，具体取决于您的需要）。

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

Answer 2

向父元素添加 display: flex; 根据需要调整弯曲方向、对齐和对齐，但边距会根据需要显示。

为什么 child 的边距不影响 parent 的高度？

Why doesn't a child's margin affect a parent's height?

css

3. Margins

8.3.1 Collapsing margins