垂直外边距合并是指相邻块级元素的上下外边距相遇时取较大值而非相加，仅发生在普通流中块级盒子间；可通过创建BFC、加边框/内边距、改用flex/grid或flow-root等方法阻止。
什么是垂直外边距合并（margin collapse）
当两个相邻块级元素的 margin-top 和 margin-bottom 直接接触时，浏览器会取其中较大的那个值，而不是相加——这就是垂直外边距合并。它只发生在普通文档流中的块级盒子之间，常见于父子、兄弟元素，比如连续的
或
。
如何阻止兄弟元素间的 margin 合并
最直接的方式是让其中一个元素脱离普通流或插入“隔离层”：
- 给任意一个元素设置
border-top或border-bottom（哪怕1px solid transparent） - 添加
padding-top或padding-bottom（哪怕0.01px） - 设置
overflow为非visible值（如overflow: hidden），但注意这可能影响子元素的定位和裁剪 - 用
display: flex或display: grid替换父容器的display: block，此时子项默认不参与外边距合并
如何避免父子元素间的 margin 合并（尤其是父容器塌陷）
父元素没高度、子元素的 margin-top “冒出来”，本质是子元素的上外边距与父元素的上边界发生了合并。解决的关键是让父元素生成一个新的 BFC（块级格式化上下文）或打断这个接触：
- 给父元素设置
overflow: hidden、overflow: auto或overflow: scroll - 给父元素设置
padding-top: 0.1px或border-top: 1px solid transparent - 给父元素设置
display: flow-root（现代推荐，语义清晰且无副作用） - 避免使用
margin-top在第一个子元素上，改用父元素的padding-top
哪些情况不会触发 margin 合并
理解边界条件比硬记规则更可靠：
立即学习“前端免费学习笔记（深入）”；
- 浮动元素（
Float: left/right）、绝对定位元素（position: absolute/fixed）不参与合并 - 行内盒、table-cell、table-row 等非块级盒不参与
- 被
clear隔开的兄弟元素之间不合并 - 父元素有
gap（Flex/Grid 容器）时，子项间距由gap控制，margin不再合并 - 设置了
contain: layout的元素会创建独立布局上下文，阻断合并
实际项目中，display: flow-root 和 gap 是最干净的现代解法；老项目里加 overflow: hidden 最快，但得小心溢出内容。别依赖「看不见的 margin」做布局，那迟早会在某个浏览器或嵌套层级里漏出来。