经典的边距合并

这是一篇关于边距合并的一句话博客文章：当两个块级元素堆叠在一起时，它们之间的垂直空间是上面元素的 margin-bottom 和下面元素的 margin-top 中较大的那个。

这有点奇怪，并且让人感到困惑。正如您所料，它们有几个注意事项。

我发现当人们对它有所领悟时，它会成为完美的微型博客文章。MDN 甚至认为 有一个专门的页面。

Adam Roberts 在 2015 年:

虽然边距合并行为乍一看有点不直观，但在多个嵌套元素的情况下，它确实让生活更轻松，在这种情况下，这种行为通常是理想的。

Andrew Grant 在 2015 年:

这可能不是 CSS 中最直观的方面，但这里需要记住的是，它背后有一些逻辑，一旦您学会了它，神秘感和困惑就会突然消失！

Geoff Graham 在 2015 年:

您是否看到边距合并如何使事情变得棘手？我个人在处理排版时会经常遇到这种情况，这很令人沮丧。

Magnus Benoni 在 2016 年:

边距合并可能令人沮丧，但了解它何时以及如何发生将使您更容易在出现问题时解决它们。

Ire Aderinokun 在 2017 年:

如果不明确了解边距合并何时发生，可折叠边距可能会让人头疼。处理或避免它们的步骤是 [要] 确切了解我们正在处理的哪种可折叠边距情况。

Adam Laki 在 2018 年:

边距合并是每本 CSS 书籍的第一章或第二章都会提到的内容。很久以前，当我了解样式表时，我当然读过它。

Jonathan Harrell 在 2018 年:

边距合并的概念是理解 CSS 中盒模型的基础，但实际上它相当复杂，并且可能令人困惑。描述边距合并工作方式的规范非常详细，但难以理解。

我并不是说这是一个被过度博客化的主题（没有什么），但它是一个有趣的线索。当这么多人觉得有必要解释最终如此小的事情时，就会发生一些奇怪的事情（可能是坏事）。

毫无疑问，这就是为什么它被认为是 CSS 设计中的错误之一

框的顶部和底部边距永远不应该被允许自动合并在一起，因为这是 所有边距合并邪恶的根源。

强调 他们的，并且实际上是整个列表中唯一的粗体文本。

如果您想阻止这种行为，您需要做一些可能比其价值更具副作用的事情，比如浮动元素。它并不像启动一个新的 块级格式化上下文 那样简单，因为这是 display: flow-root; 所做的，并且 不起作用。

您可能最好还是了解它并通过 系统地在一个方向上流动边距 或 变得奇怪 来处理它出现的任何情况。