外边距合并是CSS规范行为，指相邻块级元素垂直方向的margin取较大值而非相加；父元素无border/padding/BFC时会与首尾子元素margin合并；可通过Computed面板验证，解决方法包括创建BFC、用padding替代margin、加透明边框或改用Flex/Grid布局。
两个块级元素上下间距异常，大概率是遇到了外边距合并（margin collapsing）——这是 CSS 盒模型中一条明确但常被忽略的规则，并非 bug，而是规范行为。
什么是 margin 合并？
当两个相邻的块级元素在垂直方向上（上下）存在 margin 时，浏览器不会把它们加起来，而是取其中较大的那个值作为实际间距。比如：
- 上面的 div 设置了
margin-bottom: 20px - 下面的 div 设置了
margin-top: 12px - 最终两者之间的空白只有 20px，不是 32px
同样，父元素与第一个/最后一个子元素之间也可能发生 margin 合并，导致子元素的 margin “穿透”到父容器外部，看起来像父容器整体下移或上移。
哪些情况会触发 margin 合并？
常见触发场景包括：
立即学习“前端免费学习笔记（深入）”；
- 相邻兄弟块元素之间的上下 margin
- 父元素没有 border、padding、inline content 或 BFC 触发条件时，其与第一个子元素的
margin-top合并 - 同理，与最后一个子元素的
margin-bottom合并 - 空块级元素的上下 margin 也会相互合并（甚至塌缩为零）
怎么验证是不是 margin 合并？
打开浏览器开发者工具（F12），选中元素，在右侧 Computed 面板查看 margin-top 和 margin-bottom 的实际计算值；再对比 Styles 面板中你写的样式是否被划掉或覆盖。如果发现“本该有 20px + 15px 却只显示 20px”，基本就是合并了。
常用且可靠的解决方法
不依赖 hack，推荐以下几种符合规范的修复方式：
-
给父容器创建 BFC：设置
overflow: hidden、overflow: auto或display: flow-root，能阻止子元素 margin 与父级合并 -
用 padding 替代 margin：把原本写在子元素上的
margin-top改成写在父元素上的padding-top，完全绕开合并逻辑 -
加透明边框：给父元素加
border-top: 1px solid transparent，也能阻断合并（因为 border 会终止 margin 合并） -
改用 Flex/Grid 布局：将父容器设为
display: flex或display: grid，自动创建 BFC，同时 margin 合并规则不再适用
