css – 子边距不影响父长度

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

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

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

问题：

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

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. Collapsing margins

Certain adjoining margins combine to form a single margin. Those
margins are said to “collapse.” Margins are adjoining if there are no
nonempty content,padding or border areas or clearance to separate
them.

更多信息，例如：http://www.w3.org/TR/css3-box/#collapsing-margins

你可以添加overflow：auto;到父元素来解决这个问题。

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

原文地址：https://www.jb51.cc/css/218225.html