外边距合并不是bug而是CSS规范行为：垂直相邻块级元素的margin-top/margin-bottom会取较大值合并。典型场景有相邻兄弟元素、父子塌陷、空元素自合并；推荐用BFC（如display:flow-root）、统一设margin-bottom、gap或微调padding/border来隔离。
外边距合并不是 bug，是浏览器按规范“省事”造成的错位
你设了 margin-top: 40px 和 margin-bottom: 30px，结果两个块之间只空了 40px，不是预想的 70px——这不是渲染异常，而是 CSS 规范明确要求的行为：垂直方向相邻块级元素的外边距会合并（collapse），取其中较大值。它本意是让段落排版更自然（避免首段顶上、其余段间距翻倍），但在现代组件化布局里，就成了“间距凭空消失”的元凶。
三种典型场景必须一眼认出
合并只发生在普通文档流中的块级元素、且仅限垂直方向（margin-top/margin-bottom）。以下三类最常踩坑：
- 相邻兄弟元素：如
50px - 父子穿透（外边距塌陷）：父元素无边框、无
padding、未触发 BFC，子元素的margin-top会“顶开”整个父容器，看起来像父元素被下移 - 空元素自合并：
→ 上下外边距直接合并成单个30px，元素视觉高度比预期小
真正好用的解决法，不是“堵”，而是“隔离”或“绕过”
别硬调 margin 数值去凑，重点是阻断合并发生的条件。实操中推荐这几种：
- 给父容器加
overflow: hidden或更安全的display: flow-root：立即创建 BFC，内外边距彻底隔离，兼容性好，副作用极小（注意overflow: hidden会裁剪box-shadow溢出） - 统一用
margin-bottom控制兄弟间距：所有相邻块只设下方距，彻底避开margin-top参与合并，语义清晰、无脑可靠 - 改用
gap：父容器设display: flex; flex-direction: column;或display: grid;，然后用gap: 20px管理间距——Flex/Grid 布局天然免疫外边距合并，且支持响应式缩放 - 最小物理隔离：加
padding-top: 1px或border-top: 1px solid transparent，不改变视觉，但足以打破“无分隔”的合并前提
这些“看似能用”的方案，实际容易埋雷
浮动（float）、绝对定位（position: absolute）、inline-block 确实能阻止合并，但代价不小：
立即学习“前端免费学习笔记（深入）”；
-
float让元素脱离文档流，可能引发父容器高度坍塌，还得清浮动 -
position: absolute彻底脱离布局上下文，后续元素位置需重算，响应式维护成本高 -
inline-block元素间默认有空白间隙（来自换行符），需额外处理font-size: 0或注释消除，得不偿失
真正稳定的解法，永远围绕“控制格式化上下文”或“换布局模型”，而不是靠脱离流来治标。
