外边距合并不是bug，而是css规范定义的垂直相邻块级元素间margin折叠行为；它仅在普通文档流中发生，同号取大、异号相加，常见于兄弟元素间及父子元素无border/padding/bfc隔离时。
外边距合并不是 bug，是 CSS 规范定义的行为；它只在特定条件下发生，而“处理”的关键不是消灭它，而是理解何时需要干预、用什么方式干预最稳妥。
为什么子元素的 margin-top 会“冒出来”到父容器外
这是父子间外边距合并最典型的症状：父容器高度塌陷、顶部无空白，但整个块却被往下推。根本原因是父元素没有 border、padding、inline content 或 BFC 边界，导致子元素的 margin-top 与其“接触”，浏览器按规范将其与父容器的 margin（通常是 0）合并，最终表现为子元素的 margin “穿透”了父容器。
- 临时验证方法：给父元素加
padding-top: 1px，如果父容器立刻“撑开”，基本可确认是该问题 - 不要依赖
margin-top推第一个子元素——改用父元素的padding-top更可控 -
overflow: hidden能解决，但若子元素有绝对定位或阴影溢出，可能被意外裁剪
兄弟元素之间垂直间距比预期小，怎么让 margin 不合并
比如两个 <div> 各设 <code>margin: 20px 0，结果间距只有 20px 而非 40px。这是因为它们的 margin-bottom 和 margin-top 直接相邻且无隔断，触发了合并。
- 最轻量解法：给其中一个元素加
border-top: 1px solid transparent或padding-top: 0.1px，即可打断合并 - 现代推荐方案：父容器设
display: flow-root，它专为创建无副作用 BFC 设计，不截断溢出、不干扰阴影、兼容性已覆盖 Chrome 64+/Firefox 58+/Safari 15.4+ - 避免用
float或position: absolute来阻止——它们虽能触发 BFC，但会让元素脱离文档流，引发新问题
display: flex 或 display: grid 真的能彻底绕过外边距合并吗
能，但仅限于直接子元素。Flex/Grid 容器的子项默认不在同一块格式化上下文（BFC）中参与垂直 margin 合并，所以兄弟子项之间的 margin-top/margin-bottom 不会折叠。
- 注意陷阱：如果 Flex 容器里嵌套了一个普通
<div>，而这个 <code><div> 里又放了多个 <code><p></p>，这些<p></p>之间仍会合并 -
gap是更合适的间距控制手段，它优先级高于 margin，且不参与合并逻辑；但不要同时滥用gap和margin，容易造成意外交叠 - 别误以为“用了 Flex 就万事大吉”——它只是改变了子项的布局上下文，并未全局禁用 margin 合并
真正难处理的不是“怎么阻止”，而是判断“该不该阻止”。很多看似异常的间距，其实是规范有意为之的设计（比如段落间保持均匀呼吸感）。过早加 display: flow-root 或 overflow: hidden 可能掩盖语义结构问题，反而让后续维护更费劲。
