外边距合并不是bug，是CSS规范明确要求的行为；其导致布局异常的根源在于垂直相邻块级元素的margin-top/margin-bottom会取较大值合并而非相加，造成视觉间距变小或父容器被子元素margin-top顶开，display:flow-root是现代推荐的无副作用解决方案。
外边距合并不是 bug，是 CSS 规范明确要求的行为；布局错位的根源在于你写的 margin-top 和 margin-bottom 没有按“相加”生效，而是被浏览器合并成单个值——视觉间距变小，或父容器被意外顶开。
兄弟元素间 margin-top/margin-bottom 合并导致间距变小
两个垂直排列的块级元素，一个设 margin-bottom: 20px，另一个设 margin-top: 30px，它们之间的实际距离是 30px（取较大值），不是 50px。这是排版设计初衷：避免段落、标题等连续块元素因上下 margin 双重叠加造成过大空白。
但若你刻意依赖“顶部留白靠 margin-top，底部靠 margin-bottom”来控制不同方向的留白，就会出错。
- 常见于
<h2>+<p>、<div>+<div>这类相邻结构 - Flex/Grid 布局中子元素不参与该行为——
gap完全不受影响，且语义更清晰 - 调试时打开开发者工具，看 Computed 面板里的
margin-top/margin-bottom实际值是否被覆盖或变小
父子元素间 margin-top 穿透导致父容器下移
当父容器没有 border、没有 padding、未触发 BFC（如 overflow: hidden 或 display: flow-root），且第一个子元素设置了 margin-top，这个值会直接“冒泡”到父容器外部。
立即学习“前端免费学习笔记（深入）”；
常见于卡片、弹层、评论列表等封装组件——你改子元素没用，必须动父容器。
- 典型现象：
.card > h3设了margin-top: 24px，结果整个.card在页面里下移了 24px -
overflow: hidden虽常用，但可能意外裁剪阴影、下拉菜单或动画溢出内容 - 更稳妥的选择：
display: flow-root（现代浏览器全覆盖）、padding-top: 1px、border-top: 1px solid transparent
空元素自身 margin-top/margin-bottom 折叠为单值
一个空的 <div> 同时设了 margin-top: 40px 和 margin-bottom: 20px，最终对外表现只有 40px 的外边距（正数取大）。
常出现在占位符、分隔线、响应式隐藏后残留的空元素上。
- 注意：
height: 0不行，因为高度为 0 且无内容、无padding、无border时仍满足折叠前提 - 打破折叠条件只需加
min-height: 0、border: 1px solid transparent或padding: 1px - 真正难调的是嵌套深、子项动态插入的场景（比如无限滚动评论区），此时逐层加
display: flow-root可能增加冗余 DOM
为什么 display: flow-root 是更推荐的解法
display: flow-root 是专为创建 BFC 设计的属性，无副作用，现代浏览器全覆盖（Chrome 64+/Firefox 59+/Safari 15.4+），比 overflow: hidden 更安全，比 padding 或 border 更语义化。
- 它不会影响阴影、下拉菜单、动画溢出等视觉表现
- 它不改变盒模型尺寸（不像
padding会撑开父容器） - 它天然支持响应式和动态内容插入，不需要为每个父容器单独加 hack
- 但要注意：IE 不支持，如需兼容 IE，得回退到
overflow: hidden或border方案
真正容易被忽略的是：外边距合并只发生在标准文档流的垂直方向块级元素之间；一旦用了 Flex/Grid、设置了 display: inline-block、或触发了 BFC，它就自动失效。别在 flex 容器里还纠结 margin 合并——那根本不会发生。
