外边距重叠仅发生在垂直方向块级元素间，需同时满足：标准流、无隔离、相邻或特定父子关系；合并规则为取较大值、绝对值较大者或代数相加；推荐用padding/border、display:flow-root、Flex/Grid gap解决。
外边距重叠（Margin Collapse）是 CSS 布局中一个常见但容易被忽视的现象，它只发生在垂直方向的块级元素之间，且仅限于普通文档流中的相邻或父子关系。理解它的触发条件和计算逻辑，比盲目加 margin 更关键。
哪些情况会发生外边距重叠
必须同时满足三个条件才会发生：
- 元素是块级、处于标准文档流（未浮动、未绝对/固定定位）
- 上下外边距在视觉上“接触”——中间没有 border、padding、内容或 BFC 隔离
- 关系为：相邻兄弟元素，或父元素与其第一个/最后一个子元素
注意：水平 margin 从不重叠；inline-block、float、absolute、grid/flex 子项、overflow 不为 visible 的父容器，都不会参与重叠。
重叠后的值怎么算
不是简单相加，而是按规则合并：
立即学习“前端免费学习笔记（深入）”；
- 两个正数：取较大的那个（如 margin-bottom:20px 和 margin-top:30px → 实际间距 30px）
- 两个负数：取绝对值更大的那个（如 -15px 和 -25px → 实际间距 -25px，即上移 25px）
- 一正一负：直接相加（如 20px + (-8px) = 12px）
最实用的几种解决方式
优先选语义清晰、兼容性好、副作用小的方法：
- 给父元素加 padding-top 或 border-top：哪怕 1px transparent 边框也能打断父子重叠，且不影响视觉
-
创建 BFC 容器：推荐用
display: flow-root（现代浏览器支持良好），或overflow: hidden/auto（注意可能裁剪溢出内容） -
改用 Flex/Grid 布局：设
display: flex; flex-direction: column;后，子项 vertical margin 自动失效，改用gap控制间距更可控 -
统一 margin 方向约定：比如所有段落只设
margin-bottom，最后一个子元素清除它，避免上下 margin 同时存在
哪些方法要谨慎使用
有些技巧看似有效，但容易埋坑：
-
overflow: hidden虽然能触发 BFC，但如果子元素高度超限，内容会被意外裁剪 - 用
float或position: absolute会脱离文档流，影响整体布局逻辑 -
伪元素插入
display: table可行，但增加 DOM 复杂度，不如直接用flow-root
