垂直外边距合并是指相邻块级元素的上下外边距相遇时取较大值而非相加，仅发生在普通流中块级盒子间；可通过创建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）不参与合并clear 隔开的兄弟元素之间不合并gap（Flex/Grid 容器）时，子项间距由 gap 控制，margin 不再合并contain: layout 的元素会创建独立布局上下文，阻断合并display: flow-root 和 gap 是最干净的现代解法；老项目里加 overflow: hidden 最快，但得小心溢出内容。别依赖「看不见的 margin」做布局，那迟早会在某个浏览器或嵌套层级里漏出来。
