这是CSS规范定义的margin垂直合并行为：相邻、嵌套或空块级元素的上下外边距会取最大值而非相加，如20px与30px合并为30px；典型场景包括兄弟元素相邻、父子塌陷及空元素自身合并。
为什么两个 div 的上下 margin 没加起来，反而“消失”了一截？
因为这不是 bug，是 CSS 规范明确规定的 margin 垂直合并行为：当两个普通流中的块级元素在垂直方向上“碰头”（相邻、嵌套或为空），它们的 margin-top 和 margin-bottom 会合并成一个值，而不是相加。浏览器按规则取最大值、相加负值或选更“狠”的负值——你写的 margin-bottom: 20px 和 margin-top: 30px，最终只生效 30px。
哪些场景一定会触发 margin 合并？
三种典型结构，几乎覆盖所有“间距变小”“父容器被顶走”的现场：
- 相邻兄弟元素：如
.item1 { margin-bottom: 20px; }+.item2 { margin-top: 15px; }→ 实际间距 =20px - 父子穿透（俗称“margin 塌陷”）：父元素没
border、没padding、没内容、也没触发 BFC，子元素设margin-top: 40px→ 父容器整体下移40px，像它自己有了外边距 - 空块级元素自身合并：一个空
<div style="margin: 30px 0;"></div>→ 上下外边距直接叠成30px高，不是60px
怎么快速验证是不是 margin 合并搞的鬼？
打开浏览器开发者工具（F12），选中出问题的元素，在右侧 Computed 面板里看 margin-top 和 margin-bottom 的实际计算值；再对比 Styles 面板里你写的样式是否被划掉或显示为灰色。如果发现：“我写了 20 + 15，但 computed 只显示 20”，基本就是合并了。
最稳妥、兼容性好、不改结构的解决法
别碰 float 或 position: absolute —— 它们虽能阻止合并，但会让元素脱离文档流，引发新问题。推荐这些：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: flow-root：现代写法，语义清晰，零副作用，Chrome 64+/Firefox 58+ 全支持 - 统一用
margin-bottom控制兄弟间距：所有元素只设下方距，彻底避开margin-top参与合并 - 加透明边框：
border-top: 1px solid transparent或padding-top: 1px—— 物理隔断合并条件，老项目秒修 - 改用 Flex/Grid：
display: flex; flex-direction: column;或display: grid;，子元素自动免疫 margin 合并
容易忽略的一点：行内元素、浮动元素、绝对定位元素从不参与 margin 合并——但这不等于“用了就能解决问题”，而是意味着它们已脱离常规布局流，得额外处理对齐、高度、包裹等一堆副作用。
