子边距不影响父高度答案

【问题标题】：Why doesn't a child's margin affect a parent's height?子边距不影响父高度
【发布时间】：2015-03-05 22:13:03
【问题描述】：

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

答题者须知：请跳至“真正的问题”，谢谢 :)

但我找到了——它在问题描述的下方：

问题：

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

HTML

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

CSS

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

非常简单，默认情况下，子边距通常不会影响父高度和父尺寸，它很容易通过在父元素中添加边距可以“推”到的东西来解决，例如为父级添加内边距或边框。

调整后的 CSS：

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

但是我实际上想知道为什么会这样工作，而不仅仅是它是如何修复的，
所以请，有人可以写一个解释这种行为的答案并添加一些 DOC 参考吗？

非常感谢:)

【问题讨论】：

标签： css

【解决方案1】：

称为折叠边距。来自 www.w3.org 的文档：

6.2。折叠边距

某些相邻的边距组合成一个边距。那些边距被称为“崩溃”。如果没有边距相邻非空内容、填充或边界区域或间隙分离他们。

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

【讨论】：

很好，但为什么会这样呢？是什么让 css 设计师制定了这条规则？
@jave.web 这样空元素就不会添加垂直边距空间，也可以均匀地间隔元素而不需要重置它们的边距。
哦，好的，所以目的是使空元素无边距:) 谢谢
我一直在寻找这个解决方案。非常感谢。它工作！
@Faloude 不需要滚动条； overflow: hidden 也能做到这一点。我非常喜欢强制滚动条（不可见）可见性，事实证明overflow-y: scroll 在垂直边距方面也可以工作。

【解决方案2】：

添加显示：flex；到父元素调整 flex 方向，根据需要对齐和对齐，但边距会根据需要显示。

【讨论】：