垂直外边距合并是指相邻块级元素的上下外边距相遇时取较大值而非相加，仅发生在普通流中块级盒子间；可通过创建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（块级格式化上下文）或打断这个接触：
