外边距合并是css规范定义的垂直相邻块级元素上下margin取较大值而非相加的行为。常见于div间、父子间及空块元素；可用padding/border（需>0）、overflow:hidden、display:flow-root等阻断；负margin也参与合并，调试需查computed值。
什么是外边距合并（margin collapse）
两个垂直相邻的块级元素，它们的上下 margin 会“叠”在一起，只保留较大的那个值，而不是相加。这不是 bug，是 css 规范明确规定的渲染行为。
常见触发场景：div 紧挨着另一个 div、父元素和第一个/最后一个子元素之间、空块级元素自身上下 margin。
用 padding 或 border 阻断合并的原理
只要两个可能合并的 margin 之间存在「非空的边界」——比如 padding、border、甚至 inline content，合并就失效。
-
padding最常用：给父容器加padding-top: 1px就能隔开它和第一个子元素的margin-top -
border同样有效：哪怕border-top: 0.01px solid transparent也能阻断，但不如padding语义清晰 - 注意：
padding: 0或border: none不算“存在”，必须是计算后宽度 > 0 的值
比 padding/border 更稳妥的替代方案
靠加 padding 或 border 治标不治本，容易引入额外布局干扰。更推荐这些方式：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
overflow: hidden（或auto、scroll），触发 BFC，天然隔离内外 margin - 用
display: flow-root—— 专为此设计的现代写法，无副作用，兼容性到 chrome 64+/firefox 58+ - 子元素改用
margin-block-start并配合contain-intrinsic-size（实验性，慎用）
如果必须兼容 IE，zoom: 1（IE 专属触发 hasLayout）也能阻断，但已不推荐新增使用。
容易被忽略的合并细节
margin 合并不是“看得到才发生”，它发生在渲染树构建阶段，很多表现反直觉：
- 浮动元素、绝对定位元素、
inline-block元素不会参与外边距合并 - 父子合并只发生在“没有 border/padding/内容分隔”的情况下；一旦父元素有
padding-top，子元素的margin-top就不会再“透出”去影响上一个兄弟元素 - 负
margin也会合并，且结果可能是负值，导致元素重叠超出预期
调试时别只盯着元素自身 margin 值，得打开浏览器开发者工具的“layout”面板，看实际 computed margin 和 box 边界是否对齐。