Josh Comeau 介绍了边距合并的概念
这个概念听起来可能很简单，但如果你已经编写了很长时间的 CSS，你几乎肯定会在边距不合并或以奇怪且意想不到的方式合并时感到惊讶。在实际项目中，各种情况都会使问题变得复杂。
基本知识
- 边距合并仅发生在块方向。即使您更改了书写模式或使用了逻辑属性，也是如此。
- 最大的边距“获胜”
- 它们之间的任何元素都会取消合并（如果我们在谈论父级内部的合并，即使是一点填充或边框也会是中间的东西，并会阻止合并，正如 Geoff 在 他介绍的时候 所指出的那样）。
但情况会变得更加奇怪
- 即使边距不是来自兄弟元素，它们也可以合并。
- 来自不同元素的相同方向的边距也可以合并。
- 来自任何数量元素的边距都可以合并。
- 负边距也会合并，但获胜的是较大的负数。
- 如果是一堆元素，它们都有不同的边距，你基本上必须学习一个算法来理解发生了什么以及为什么。
不幸的是，这些事情会发生。对于任何技能水平来说，这都令人沮丧。这些是 CSS 的怪癖，必须明确地教导，而不是感觉像是系统中自然的一部分。即使是 CSS 工作组也认为这是一个 错误
单个框的顶部和底部边距永远不应该被允许自动合并在一起，因为这是 所有边距合并问题的根源。
😬
我不知道边距合并会导致日常 CSS 开发中出现严重问题，但你必须承认这充其量是混乱的。
我还想说，今年人们开始建议使用 CSS 网格来居中内容，并将所有元素放在三列网格的中间，就像 .grid-wrapper > * { grid-column: 2; } 一样。重点在于您仍然可以使用完整的网格，因此更容易使单个元素全出血，边缘到边缘（或者以其他方式 使用空间）。但是，当您这样做时，元素会变成网格项并脱离正常流程，因此您将不会得到边距合并。这曾经让我觉得这种技术是一个缺点，因为这会出乎意料。但现在想想边距合并有多么糟糕，也许避免边距合并是这种技术的另一个优势。