外边距塌陷是CSS中块级元素垂直外边距合并的现象，实际间距取两者中的较大值。常见于相邻兄弟元素、父子元素及空元素间，主因是CSS为文本排版设计的默认行为。解决方法包括：添加border或padding、设置overflow触发BFC、使用flex/grid布局、统一单方向margin或用padding替代。理解其机制可有效避免布局问题。
在使用 CSS 布局时，你可能会遇到两个块级元素的上下外边距没有按预期相加，而是“合并”成一个更大的外边距，这种现象被称为外边距塌陷（Margin Collapse）。它常常让人困惑，尤其是对初学者来说。下面我们就来解释它为什么会发生，以及如何解决。
什么是外边距塌陷？
当两个垂直方向上的块级元素的外边距相遇时，它们不会简单地叠加，而是合并为一个外边距，其大小等于两者中较大的那个。这就是外边距塌陷。
例如：
div1 的 margin-bottom: 20px;div2 的 margin-top: 30px;
实际间距不是 50px，而是 30px —— 发生了塌陷。
立即学习“前端免费学习笔记（深入）”；
外边距塌陷的常见场景
塌陷主要发生在以下几种情况：
- 相邻兄弟元素：两个同级的块级元素垂直排列时，上方元素的 margin-bottom 与下方元素的 margin-top 会发生塌陷。
- 父元素与第一个/最后一个子元素：如果父元素没有 border、padding、inline content 等隔开，其与子元素的上下外边距也会塌陷。比如父元素的 margin-top 和第一个子元素的 margin-top 会合并。
- 空的块级元素：一个没有内容、内边距和边框的块级元素，其自身的上下外边距也会合并。
为什么会出现外边距塌陷？
这其实是 CSS 规范的设计初衷，目的是为了更合理地处理段落和标题之间的间距。比如在纯文本排版中，连续的段落之间只需要一个外边距，而不是两个叠加的间距，这样视觉上更自然。
但现代布局中，尤其是在使用 div 构建结构时，这种行为常常不符合开发者的预期，于是就成了“坑”。
如何解决外边距塌陷？
根据不同的场景，有多种方式可以避免或消除外边距塌陷：
- 添加 border 或 padding：给父元素设置 border: 1px solid transparent 或 padding: 1px，可以隔离父子间的外边距，阻止塌陷。
- 使用 overflow 属性：给父元素设置 overflow: hidden、auto 或 scroll，会创建一个新的块格式化上下文（BFC），从而阻止外边距塌陷。
- 使用 BFC 触发其他方式：如设置 display: flow-root、float、position: absolute 等也能触发 BFC，阻止塌陷。
- 使用 flex 或 grid 容器：将父元素设为 display: flex 或 display: grid，其子元素不再参与外边距合并。
- 统一使用单方向外边距：只用 margin-top 或 margin-bottom，避免上下同时设置，从设计层面规避问题。
- 使用 padding 替代 margin：在需要控制内部间距时，优先考虑使用 padding 而非子元素的 margin。
基本上就这些。外边距塌陷不是 bug，而是标准行为。理解它的触发条件，并合理利用 BFC 或布局结构调整，就能轻松应对。关键是在写结构时意识到哪些情况可能塌陷，提前预防。
