外边距合并是CSS规范定义的正常行为，仅发生于普通流中块级元素的垂直方向。典型场景包括相邻兄弟元素、父子元素间传递及空块级元素自身上下外边距合并；常用解决法有触发BFC、统一用margin-bottom、加透明边框或padding；Flex/Grid布局天然避免该问题。
外边距合并（Margin Collapse）不是bug，是CSS规范明确规定的默认行为。它只发生在普通文档流中的块级元素之间，且仅限垂直方向——比如两个段落上下紧挨着，或父元素和第一个子元素之间。错位感往往来自“预期间距 = margin之和”，而实际却是“取最大值”。搞清规则，再选对方法，问题就迎刃而解。
哪些情况会触发外边距合并
记住三类典型场景：
-
相邻兄弟元素：如
.box1 { margin-bottom: 20px; }和.box2 { margin-top: 30px; }，实际间距为 30px（非50px） -
父子元素间传递：父元素无边框、无padding、无BFC时，子元素的
margin-top会“顶开”整个父容器，看起来像父元素被下移 -
空块级元素自身上下外边距：一个空
<div></div>设了margin: 40px 0;，上下外边距也会合并成单个40px
最常用又稳妥的解决方式
不改结构、兼容性好、语义清晰的方案优先考虑：
-
用
overflow: hidden触发BFC：给父容器加这行，立刻隔离内外边距，几乎零副作用（注意：若需阴影溢出，换用display: flow-root） -
统一用
margin-bottom控制间隔：兄弟元素之间只设下方距，彻底避开上下同时设值带来的不确定性 -
加透明边框或最小padding：如
border-top: 1px solid transparent或padding-top: 1px，物理阻断合并条件
现代布局可直接绕过问题
如果你能控制容器布局模式，这些方式天然免疫外边距合并：
立即学习“前端免费学习笔记（深入）”；
-
Flex 布局：父元素设
display: flex; flex-direction: column;，用gap控制间距，干净又精准 -
Grid 布局：同理，
grid-row-gap或gap替代 margin，逻辑更直观 - Inline-block 容器：虽稍旧，但对老项目快速修复有效（注意默认有空白间隙，需处理）
容易忽略的关键细节
有些“看似合理”的操作反而无效或埋坑：
- 浮动（
float）、绝对定位（position: absolute）确实能阻止合并，但会让元素脱离文档流，可能引发新布局问题 - 伪元素隔断（如
::before { display: table; }）可行，但属于黑科技，调试成本略高 - reset 或 normalize.css 可减少默认样式干扰，但不能根治自定义 margin 引发的合并
