外边距叠加指垂直相邻元素的外边距合并为较大值，常见于块级元素间。可通过添加边框、使用BFC、统一设置margin-bottom等方式避免布局错乱。
外边距叠加（Margin Collapse）是CSS中常见的现象，尤其在处理块级元素垂直布局时容易出现。理解其规则并掌握清除技巧，能有效避免页面布局错乱。
什么是外边距叠加？
当两个垂直方向的外边距相遇时，它们会合并成一个外边距，其大小取两者中的较大值。这种情况通常发生在：
- 相邻兄弟元素之间
- 父元素与第一个或最后一个子元素之间
- 空块级元素自身上下外边距
常见场景与影响
外边距叠加虽然符合规范，但在以下情况可能导致布局偏差：
- 父元素与子元素顶部间距超出预期
- 列表项或段落间间距不一致
- 使用 margin 实现模块间隔时出现“少算”问题
清除外边距叠加的方法
可通过以下方式避免或控制外边距叠加：
立即学习“前端免费学习笔记（深入）”；
- 添加边框或内边距：在相关元素上设置 border 或 padding，可阻断叠加。例如给父元素加 border-top: 1px solid transparent。
- 改变显示模式：使用 inline-block、flex、grid 等布局方式，天然避免外边距叠加。
- 利用 BFC（块格式化上下文）：将元素设为 BFC 触发条件之一，如 overflow: hidden、display: flow-root 等，隔离外边距。
- 统一方向设置外边距：只用 margin-bottom 控制兄弟元素间距，避免上下同时设值。
实用建议
在实际开发中，推荐采用更可控的布局策略：
- 在组件设计时统一外边距方向，比如所有模块仅使用 margin-bottom
- 使用 CSS Reset 或 Normalize.css 统一默认样式，减少意外叠加
- 对易出问题的结构（如嵌套段落）主动设置 overflow: hidden 或 padding 隔离
