外边距塌陷是CSS规范行为，指垂直方向块级元素间相邻或嵌套的margin自动合并为单个值；常见于父子（子margin-top顶穿父容器）和兄弟元素（上下margin取最大而非累加）间；可通过padding替代、flow-root触发BFC、gap或隔离层等方案解决。
CSS中所谓的“内外边距重叠”，准确说是外边距塌陷（margin collapse）——它只发生在垂直方向的块级元素之间，不是padding和margin互相叠加，而是相邻或嵌套的margin自动合并成一个值。常见于父子元素间（子元素的margin-top“顶穿”父容器）或兄弟元素间（两个div上下紧挨，上下margin不累加而取最大）。关键在于：它属于CSS规范行为，不是bug，但常导致布局“意外留白”或“高度丢失”。
父子间塌陷：子元素margin顶穿父容器
最典型场景：父div没border/padding/overflow，子div设了margin-top，结果整个父容器被往下推，顶部空白实际来自子元素，但视觉上像父容器自己有了上边距。
- 给父元素加 padding-top: 1px（哪怕极小，也能物理隔开边距）
- 给父元素加 border-top: 1px solid transparent（不改变颜色，却能触发BFC并阻断塌陷）
- 用 padding替代margin：把子元素的margin-top挪到父元素的padding-top上——语义更清晰，且padding不会塌陷
兄弟间塌陷：相邻块级元素上下margin合并
比如两个段落都设了 margin-bottom: 20px 和 margin-top: 20px，你以为间距是40px，实际只有20px（取较大值）。
- 统一约定：所有段落只设 margin-bottom，最后一个子元素用 :last-child { margin-bottom: 0 } 清除多余底部空白
- 改用 gap（在Flex或Grid容器中）：比margin更可控，完全不塌陷，例如 display: flex; flex-direction: column; gap: 20px;
- 插入一个“隔离层”：比如在两元素间加一个 ，虽不常用，但原理可靠
用BFC从根本上隔离塌陷区域
BFC（块级格式化上下文）让元素变成独立布局容器，内部margin不再影响外部。现代推荐写法简洁安全：
立即学习“前端免费学习笔记（深入）”；
- display: flow-root（最干净，无副作用，兼容性到Chrome 64+/Firefox 59+）
- overflow: hidden（兼容性最好，但可能意外截断阴影或下拉菜单）
- 避免用 float 或 position: absolute——它们会破坏文档流，引发新问题
为什么padding替代更值得优先考虑
padding是内容区到边框的距离，天然不参与塌陷；用它代替margin，逻辑更贴近设计意图：“这段文字离容器顶部该有多远”，而不是“这段文字要推开上面谁”。配合 box-sizing: border-box，还能让width/height包含padding，尺寸计算不混乱。
基本上就这些。塌陷本身不难理解，关键是选对方法：日常开发中，优先用 padding + flow-root 组合，既语义清晰又稳定可靠。
