外边距折叠是指垂直相邻块级元素的上下margin合并为较大者。常见于兄弟、父子及空元素间，可通过触发BFC、添加border/padding、使用flex/grid布局或统一margin方向来控制。
在CSS布局中，外边距折叠（margin collapse）是一个常见但容易被忽视的现象。它指的是两个垂直方向上的相邻元素的外边距会合并成一个外边距，其大小取两者中的较大值。理解并合理管理 margin collapse，能帮助我们更精准地控制页面的间距。
什么是外边距折叠？
当两个块级元素在垂直方向上相遇时，它们之间的实际外边距并不是两者 margin 的相加，而是取较大的那个值。例如：
元素A的下外边距是20px，元素B的上外边距是10px，它们之间的间距不会是30px，而是20px。这种现象只发生在：
- 块级元素在普通文档流中（非浮动、非绝对定位）
- 垂直方向上的外边距（上下 margin）
- 相邻或嵌套元素之间满足特定条件
哪些情况会发生外边距折叠？
掌握常见的折叠场景有助于提前规避问题：
立即学习“前端免费学习笔记（深入）”；
1. 相邻兄弟元素两个兄弟块元素上下排列时，它们之间的 margin 会折叠。
2. 父子元素之间如果父元素没有 border、padding、inline content 或触发 BFC，且子元素有上外边距，那么这个 margin 会“穿透”到父元素外部，与父元素的上外边距折叠。
3. 空块元素一个块元素自身上下 margin 相邻（中间无内容、padding、border），则这两个 margin 也会折叠。
如何防止外边距折叠？
虽然外边距折叠是CSS规范的一部分，但在某些布局中我们希望避免它。以下是几种有效的控制方法：
1. 触发BFC（块格式化上下文）为父元素创建一个新的BFC，可阻止内部元素与外部元素的 margin 折叠。常用方式包括：
- 设置 overflow: hidden
- 使用 display: flow-root（推荐，语义清晰）
- 添加 float 或 position: absolute
给父元素添加至少1px的 border 或 padding，可以阻断父子间的 margin 折叠。
3. 使用 padding 替代 margin在容器内部用 padding 控制间距，而不是依赖子元素的 margin，能更稳定地管理布局距离。
4. 利用 flex 或 grid 容器Flexbox 和 Grid 布局中的项目默认不会与其父容器发生外边距折叠，是现代布局的良好选择。
实用建议与最佳实践
为了减少 margin collapse 带来的意外布局问题，可以遵循以下习惯：
- 统一使用上或下 margin，避免同时设置，减少冲突机会
- 在组件设计中采用“单方向 margin”原则，比如只用 margin-bottom
- 对布局容器主动设置 overflow: hidden 或 display: flow-root 预防折叠
- 调试时使用浏览器开发者工具查看实际渲染的 margin 区域
基本上就这些。理解 margin 折叠不是要完全消除它，而是学会预测和管理它的行为，让布局更可控。合理运用上述技巧，能有效提升页面结构的稳定性与一致性。不复杂但容易忽略。
