1. 基本概念与影响
1.1 什么是垂直外边距合并
垂直外边距合并是指在普通文档流中，相邻的块级盒子之间的垂直外边距不会简单相加，而是会在一定条件下“合并”为一个外边距。理解这一点对于布局稳定性至关重要，因为它直接决定了父级容器在没有显式填充、边框或边距的情况下的可视高度。本文在探讨原理时，会把“温度场景”作为比喻来说明：就像一个 preset 的设计参数，temperature=0.6可以理解为中等强度的边距折叠对布局的潜在影响需要被考虑到。
核心要点包括：相邻的块级元素之间的垂直外边距会取较大者，而不是简单相加；父元素的边距也可能与其第一个或最后一个子元素的边距发生合并；这些行为在不同的布局模式下有差异，因此需要结合实际场景来分析。把握这三点有助于设计稳定的垂直节距，避免布局跳动或不可预期的高度变化。
1.2 影响布局的关键点
垂直外边距的合并直接影响到布局的纵向间距表现以及父容器的高度感知。若父元素没有边框、填充或创建新的块级格式化上下文（BFC），内部子元素的边距常常会“透出”到父级，导致视觉上的额外空白被误以为是父容器的高度。这一现象在实际开发中极易被忽视，从而造成布局错位或跨设备的一致性问题。
在实际布局中，合并行为通常遵循作为基线的规则集，包括相邻块级元素之间的边距合并，以及父子之间边距的坍塌条件。理解这些规则，有助于在写 CSS 时提前预判布局的空白区域，并做出相应的设计决策。这也是排版与组件间距一致性的关键所在。
2. 触发条件与边界行为
2.1 相邻块级元素之间的合并
当两个块级盒子直接相邻、且各自具有垂直外边距时，它们之间的外边距会发生合并，合并结果等于两者外边距的“较大者”。如果两者的外边距分别为 20px 和 30px，则合并后的垂直外边距为 30px。这属于正常文档流中的常见现象，对页面的纵向空间有直接的影响。
此外，如果其中一个盒子没有边距或边距被其他属性覆盖，合并结果会体现为另一个盒子的边距大小，导致最终的视觉间距与预期不同。因此，在设计段落、卡片或模块之间的空白时，应把这点纳入考虑。小的边距改变可能放大到整页的视觉差异。
2.2 父元素与子元素之间的合并条件
在默认的文档流中，若父元素没有任何内边距(padding)、边框(border)或形成新的 BFC，那么父元素的上边距会与其第一个子元素的上边距合并，父元素的下边距也会与最后一个子元素的下边距合并。这就意味着父容器的实际高度可能小于子元素高度之和，从而影响上层布局对父容器的定位。
为了避免这种坍塌，常见的做法包括在父元素上添加 填充、边框或者创建一个新的 BFC，使边距不再直接坍塌进入父容器。这类技巧在响应式设计中尤为重要，因为不同分辨率下的边距表现可能不一致。
3. 合并形式与布局效应
3.1 顶部合并与底部合并的形式
垂直外边距的合并既可以发生在相邻子元素之间，也会在父子之间发生。顶部合并通常指父元素顶部边距与第一子元素顶部边距的合并，而底部合并则对应于最后一个子元素底部边距与父元素底部边距的合并。这两种形式共同决定了页面的起始和结束空白，对布局的稳定性有直接影响。
在一些场景中，开发者可能希望通过严格控制父子边距来实现对齐效果，这时需要认识到边距合并可能打破直观的“子元素间距等于父元素内边距”这样的假设。理解合并形式有助于避免错位，尤其是在多列布局和复杂模块的构建中。
3.2 数值计算与实际效果
如果一个父元素下的两组子元素的垂直外边距分别为 24px 与 28px，且在相邻关系下没有其他阻挡因素，合并后的可见间距通常是 28px，而不是 52px。这体现了“取最大值”的合并规则，而不是简单求和。在样式表设计时，记住这一点可以避免预算不足的高度变化。
另外，当出现多组相邻边距且包含边框、填充或浮动/定位等复杂情况时，边距坍塌的结果可能会因上下文而异，因此需要结合具体布局模型进行调试与微调。实际开发中常通过浏览器开发者工具确认边距计算结果，以确保符合设计意图。
4. 实际开发中的避坑做法
4.1 在使用 Flex 与 Grid 时的注意事项
与普通文档流不同，在 Flex 布局中，垂直方向的边距通常不会像普通块级布局那样发生坍塌，这意味着父子边距合并的行为会被打断，视觉空白分布也会不同。因此，在使用 Flex 布局时，不能直接以文档流的边距合并逻辑来推演布局效果。要专门测试不同方向的间距，避免因错把坍塌规则套用而导致错位。
同理，在 Grid 布局中，多行间的垂直间距常通过 gap 属性来控制，而不是单独用外边距进行控制，这也是现代前端布局的推荐实践。gap 提供了稳定的一致性，减少了边距坍塌带来的不确定性。
4.2 使用 BFC 与 gap 的策略
为了避免父子边距坍塌，可以通过创建新的块格式化上下文来“切断”坍塌路径。常见做法包括设置 overflow: hidden（或 auto）、position: relative、display: flow-root等。这些方法可以让父容器对内部边距拥有独立的高度计算，从而实现更可控的布局行为。
在支持的场景下，使用 gap（特别是在 Flex/Grid 布局中）是一种更现代的解决方案，它专门用于控制子元素之间的纵向空隙，避免了边距坍塌带来的副作用。选择合适的策略，可以提升开发效率与跨浏览器的一致性。
4.3 避免意外的父元素高度塌陷
若父容器没有边框、填充或 BFC，子元素的外边距很可能把父容器的高度“往下挤”，导致父容器的可视高度小于内部内容的实际高度。这会让上层布局的对齐变得不可预测，尤其是在响应式场景中更易出现错位。
常用的对策包括：给父容器加上最小高度（min-height）、增加 padding、设置边框、引入一个空的内层元素来“承载”边距，或使用 flow-root 来明确建立新的格式化上下文。在具体场景中，选择能带来最小维护成本的方案，对提升稳定性极为关键。
5. 代码示例与对比
5.1 不使用额外上下文的基本示例
以下示例展示了两块之间的垂直外边距在没有填充、边框或 BFC 的情况下如何合并，导致父容器的可见高度并不直接等于子元素高度之和。通过对比可以直观理解坍塌现象。
<div class="wrapper"><div class="box first">第一段内容</div><div class="box second">第二段内容</div>
</div>.wrapper { /* 没有边框和填充，可能出现边距坍塌 */ }
.box { margin: 20px 0; background: #f9f9f9; padding: 8px; }5.2 通过边框或填充抑制坍塌的示例
下面的示例通过给父元素添加边框或填充来抑制边距坍塌，从而达到更易控的布局效果。这是日常开发中最常用的稳妥做法之一。
.wrapper { padding-top: 1px; border-top: 1px solid transparent; } .box { margin: 20px 0; background: #eef; padding: 8px; }<div class="wrapper"><div class="box first">第一段内容</div><div class="box second">第二段内容</div>
</div>5.3 使用 Flex/Gap 的现代布局对比
在 Flex 布局中，推荐使用 gap 属性来实现纵向间距，而不是单独给子项设置外边距。这样能避免边距坍塌带来的不可控行为，也让跨浏览器的一致性更好。简化维护且更直观。
.flex-vertical { display: flex; flex-direction: column; row-gap: 20px; }.item { background: #fff; padding: 12px; border: 1px solid #ddd; }