外边距重叠不是bug，是CSS规范定义的垂直相邻块级元素间margin取较大值（或相加）的行为；发生条件为：标准流、块级、垂直相邻、无border/padding/BFC隔断；解决方式包括加透明边框、display:flow-root触发BFC、改用Flex/Grid等。
垂直方向的 margin 会重叠，不是 bug，是 CSS 规范明确规定的盒模型行为——它只在特定条件下发生，且有确定的计算逻辑。理解它，才能避免“为什么加了 20px 又加了 30px，结果只有 30px”的困惑。
哪些元素之间会发生 margin 折叠？
必须同时满足四个条件：
- 两个块级元素（
display: block或table等） - 处于标准文档流（没用
float、position: absolute、inline-block） - 垂直相邻（兄弟元素，或父元素与第一个/最后一个子元素）
- 中间无任何阻隔：没有
border、padding、内容、clear、height，也没创建新 BFC
常见误判点：flex 或 grid 子项不参与折叠；overflow: hidden 的父容器内部也不会和子元素折叠；空 div 自身的 margin-top 和 margin-bottom 也会折叠。
折叠后的值怎么算？
不是相加，而是按规则合并：
立即学习“前端免费学习笔记（深入）”；
- 两个正数（如
margin-bottom: 20px和margin-top: 30px）→ 取30px - 两个负数（如
-15px和-25px）→ 取-25px（绝对值更大者） - 一正一负（如
20px和-8px）→ 直接相加得12px
注意：父子折叠时，子元素的 margin-top “穿透”到父元素顶部，导致父容器整体下移，而不是在父子之间留出空白——这是最常被当成“bug”的场景。
怎么可靠地阻止 margin 折叠？
核心思路是打破折叠条件，优先选副作用小、语义清晰的方式：
- 给父元素加
padding-top: 1px或border-top: 1px solid transparent（简单直接，兼容性好） - 用
display: flow-root触发 BFC（现代推荐，无裁剪风险，比overflow: hidden更安全） - 改用
display: flex; flex-direction: column+gap控制间距（彻底绕过margin折叠，但需布局重构） - 统一约定只设
margin-bottom，并用:last-child { margin-bottom: 0 }清除末尾（适合列表、段落等线性结构）
慎用 overflow: hidden：它虽能触发 BFC，但可能意外裁剪溢出内容；也别依赖 float 或 position: absolute，它们会让元素脱离文档流，引发连锁布局问题。
真正容易被忽略的，是父子折叠这种“看不见的移动”——它不产生可见空白，却让整个区块位置偏移。检查布局错位时，先看父容器有没有 padding 或 border，比反复调 margin 更有效。
