外边距合并是CSS中块级元素垂直外边距相遇时合并为较大者的现象。它发生在相邻兄弟元素、父子元素或空元素自身上下外边距之间，如margin-bottom:20px与margin-top:30px合并为30px；可通过设置border、padding、BFC（如overflow:hidden）、Flex/Grid布局或统一单方向margin来防止；而padding不会合并，始终叠加显示，如padding-bottom:20px与padding-top:30px实际间距为50px。掌握该机制有助于提升布局精确性。
在使用CSS进行页面布局时，盒模型中的外边距（margin）重叠是一个常见但容易被忽视的现象。它发生在块级元素垂直方向上的外边距相遇时，相邻的正外边距或负外边距会合并为一个外边距，这个过程称为“外边距合并”（Margin Collapse）。理解并掌握这一机制，有助于更精确地控制元素间的间距。
什么是外边距合并？
当两个垂直方向上的外边距相遇时，它们不会简单相加，而是合并成一个外边距，其大小等于两者中的较大者（若包含负值，则按规则计算）。这种行为只发生在块级元素的垂直方向上，水平方向的外边距不会合并。
常见发生场景包括：- 相邻兄弟元素之间的上下外边距
- 父元素与第一个/最后一个子元素之间的外边距
- 空块级元素自身的上下外边距
例如：
AB
这两个 div 之间的实际间距是 30px，而不是 50px，因为它们的外边距发生了合并。
立即学习“前端免费学习笔记（深入）”；
如何防止外边距合并？
在实际开发中，有时需要避免外边距合并带来的意外布局问题。可以通过以下几种方式控制或阻止合并：
- 使用 padding 或 border 替代 margin：在父元素上设置 border 或 padding 可以隔离子元素的外边距，从而阻止与父元素的 margin 合并。
-
为父元素创建 BFC（块格式化上下文）：通过设置
overflow: hidden、display: flow-root等属性，使父元素成为独立的布局容器，阻止内外边距合并。 - 使用 flex 或 grid 容器：Flexbox 和 Grid 布局中的项目默认不会与其容器发生外边距合并。
-
统一使用单方向外边距：例如只设置
margin-top或只设置margin-bottom，避免上下同时设置，减少合并可能性。
内边距是否会发生合并？
不会。内边距（padding）不存在合并机制。无论相邻元素还是父子元素之间，padding 都会正常叠加显示。它始终属于元素自身的内容区域延伸，不会像 margin 那样参与层叠计算。
例如：
AB
两个 div 内容之间的实际距离是 50px，因为 padding 不会合并。
总结与建议
外边距合并是CSS盒模型的标准行为，虽然有时带来困扰，但在文档流排版中能保持合理的默认间距。关键在于识别何时会发生合并，并根据布局需求选择合适的应对策略。
推荐在日常开发中：
- 了解常见合并场景，避免误判布局问题
- 优先使用 BFC 或现代布局方式（如 Flex/Grid）来隔离结构
- 合理规划 margin 使用方向，减少冗余设置
基本上就这些，掌握好 margin 的合并逻辑，能让页面布局更加可控和 predictable。
