margin垂直外边距合并是css规范定义的默认行为：当两个普通文档流中的块级元素在垂直方向上相邻、嵌套或为空时，其上下外边距会按规则合并为一个值，而非相加；兄弟间取较大值，父子间发生穿透，空元素自身上下外边距合并；仅垂直方向生效，水平方向不合并。
什么是 margin 垂直外边距合并？
它不是 bug，是 CSS 规范定义的默认行为：当两个**普通文档流中的块级元素**在垂直方向上“碰头”时（比如上下相邻、父子嵌套、或空元素自身），它们的 margin-top 和 margin-bottom 会“叠”成一个外边距，最终生效的值不是相加，而是按规则计算出一个结果。
合并发生的三种典型场景及表现
你写的样式没少，但间距却“缩水”了——大概率掉进了这三类坑里：
-
兄弟元素间合并：
.a { margin-bottom: 20px; }+.b { margin-top: 30px; }→ 实际间距 =30px（取较大值） -
父子元素间穿透（margin 穿透）：父元素没边框/内边距，子元素
margin-top: 40px会“顶穿”父元素，导致父元素整体上移，仿佛父元素自己有了margin-top: 40px -
空块级元素自身合并：一个
div没内容、没边框、没padding，只设margin: 20px→ 上下外边距直接合并，等效于只占20px高度（不是40px）
合并怎么算？负值、混合值都怎么处理？
浏览器不是简单取最大，而是有一套明确计算逻辑：
- 两正数 → 取较大者（
margin-top: 15px+margin-bottom: 25px→25px） - 一正一负 → 相加（
margin-top: 30px+margin-bottom: -10px→20px） - 两负数 → 取绝对值较大的负值（
margin-top: -20px+margin-bottom: -35px→-35px）
注意：该规则仅对**垂直方向**生效；margin-left/margin-right 永远不会合并。
立即学习“前端免费学习笔记（深入）”；
如何可靠地阻止合并？关键就看这三点
别硬扛，用规范手段“断开”合并条件。最常用且兼容性好的方式：
- 给父元素触发 BFC：加
overflow: hidden、display: flow-root或float: left（后者会脱离文档流，慎用） - 插入物理隔离层：加
border-top: 1px solid transparent或padding-top: 1px（哪怕 1px 也能阻断） - 换定位模型：子元素改用
position: absolute或display: inline-block（但需注意布局语义变化）
真正容易被忽略的是：**只要父子之间没有 border/padding 分隔，又没触发 BFC，margin 穿透就一定会发生**——哪怕你只给子元素设了 margin-top，父容器也会“被抬高”。调试时优先检查这点。
