边距折叠是 CSS 的一种行为，其中块级元素的垂直边距合并为一个，即具有最大值的元素的边距。有时，当我们为元素分配边距时，它不会以我们认为的方式工作，这会造成混乱。以下规则将帮助您了解边距折叠：
规则 1：仅折叠块级元素的垂直边距
第一条规则是只有元素的垂直边距会折叠，而不会折叠水平边距。控制边距折叠的 CSS 规则说水平边距永远不能满足所需的条件。
示例 1：
HTML
This paragraph's bottom
margin is collapsed.
This paragraph is 34px
below the above text.
HTML
This is paragraph 1.
This is paragraph 2.
HTML
This is paragraph 1
This is paragraph 2.
HTML
This is block 1.
This is block 2.
输出：在这个例子中，第一个和第二个
标签的 34px 边距不是分开 68px，而是占据相同的空间。由于第一段的下边距与第二段的上边距合并。因此，两段之间的空间仅为 34px。
示例 2：此示例演示了使用水平边距时会发生什么。
HTML
This is paragraph 1.
This is paragraph 2.
输出：很明显，水平边距不会塌陷。边距折叠仅发生在块级元素上。除了块级元素之外，没有其他元素边距可以折叠。在这里，我们有两个
标记是内联块，因此它们的边距不会折叠。
规则 2：元素应该相邻
只有当块元素彼此直接接触时才会发生边距折叠。它们不应被任何换行符或其他元素分隔。我们通常在两个元素之间提供
标签，但正因如此，边距不会折叠。
示例：在此示例中，我们在两个元素之间提供了换行符。
HTML
This is paragraph 1
This is paragraph 2.
输出：您可以在输出中看到第二个
标签的上边距没有与第一个
标签的下边距折叠，这是由于两个元素之间的换行而发生的。元素必须相邻才能折叠边距。
规则 3. 将使用边距较大的元素
此规则决定了当边距不对称时会发生什么。这意味着如果顶部元素需要下方 62px 的空间，而底部元素只需要上方 24px 的空间。在这种情况下，两个元素之间的空间仅为 62px。正如上面已经解释过的，如果您有两个相邻的元素，它们之间没有填充、边框或换行符(即，它们的边距垂直接触)，那么它们的边距将折叠，并且两个中较大的边距获胜。
规则 4：overflow 属性应该设置为可见
当元素的溢出属性的值设置为可见以外的任何值时，元素的边距不会折叠。它的值必须是可见的，以便边距可以折叠。因此，溢出：隐藏和溢出：自动不会让边距崩溃。
规则 5：负边距相加
负边距用于减少两个元素之间的空间。它使元素彼此更接近。考虑第一个元素的 margin-bottom 是 -65px ，第二个元素的 margin-top 是 -25px 。在这种情况下，两个元素之间的空间将为 -65px，因为它比 -25px 更重要。但是当一个边距为正而另一个为负时，则添加这些边距以获得元素之间的空间。
例子：
HTML
This is block 1.
This is block 2.
输出：在这个例子中，第一个 div 的 margin-bottom 是 50px ，第二个 div 的 margin-top 是 -25px 。所以它们之间的空间大小将是 25px (-25px+50px)。
规则 6：父元素和子元素之间的边距不能折叠
边距用于增加兄弟元素之间的空间。它不能用于增加父元素和子元素之间的空间，因为我们有填充。边距只会从子元素转移到父元素，因为边距总是试图增加兄弟元素之间的空间，因此我们觉得边距应用于父元素。所以父元素和子元素之间没有边距折叠，它们之间只有边距的转移。
要将边距转移到父元素，必须满足以下条件：
- 父母和孩子应该是相邻的。
- 父元素的高度应该是自动的。
- 父元素不应有任何填充或边框。
规则 7：折叠仅适用于流布局
当元素在 flexbox 或 grid box 中对齐时，边距永远不会折叠，或者它们不是流入的，例如绝对定位或浮动。