Margin Collapse是CSS规范规定的相邻块级元素垂直外边距取较大值而非相加的行为，导致父容器塌陷、间距异常等“突然变矮”现象；可通过加border、padding、overflow或display: flow-root阻止，Flex/Grid容器子元素间不发生该合并。
什么是Margin Collapse，为什么它总让布局“突然变矮”
Margin Collapse（外边距合并）不是bug，是CSS规范明确规定的渲染行为：相邻块级元素的垂直margin-top和margin-bottom会取较大值，而不是相加。你设了margin-bottom: 20px和margin-top: 30px，实际只生效30px——这就是合并。它常导致父容器高度塌陷、列表项间距比预期小、卡片堆叠过紧等现象。
典型触发场景包括：
- 兄弟元素之间（如连续的
p或div） - 父元素与第一个/最后一个子元素之间（尤其当父元素没边框、内边距、内容分隔时）
- 空块级元素自身上下外边距之间
怎么阻止Margin Collapse：4种可靠手段
没有“全局关闭”开关，只能在具体位置干预。选哪种取决于你控制的是哪一层、是否要保留语义结构：
- 给父元素加
border-top或border-bottom（哪怕1px solid transparent） - 给父元素设
padding-top或padding-bottom（哪怕0.1px） - 给父元素设
overflow为非visible值（如overflow: hidden或auto） - 用
display: flow-root（现代方案，兼容性到Chrome 64+/Firefox 58+，不改变盒模型语义）
注意：display: inline-block或float也能阻止，但会破坏文档流，通常不推荐作为首选。
立即学习“前端免费学习笔记（深入）”；
Flex/Grid布局下Margin Collapse还存在吗
不存在。Flex容器（display: flex）和Grid容器（display: grid）的直接子元素，其外边距不会发生垂直合并——这是它们脱离常规文档流带来的副作用之一。
但这不等于“自动解决所有间距问题”：
- Flex项目之间仍可能因
gap和margin共存而产生意外间距叠加 - 如果Flex容器内部又嵌套了普通块级结构（比如一个
div里放多个p），这些子元素之间依然会合并 -
gap属性本身不参与Margin Collapse，但它优先级高于margin（部分浏览器中gap会“覆盖”相邻margin）
调试Margin Collapse最有效的检查方式
别猜，直接看Computed面板里的margin-top和margin-bottom是否被浏览器标灰（表示未生效），再对照DOM树找相邻块级元素关系。
更快速的办法是临时加视觉标记：
- 在疑似合并的元素上加
outline: 1px dashed red（不影响布局） - 用开发者工具的“Layout”侧边栏，勾选
Show box model，观察外边距区域是否连成一片 - 对父容器逐个尝试
overflow: hidden，看高度是否“弹出来”——这是最直接的验证
很多人卡在“以为改了margin就该有反应”，其实根本没意识到当前上下文已经触发了合并。真正难的不是修复，而是第一时间识别出它正在发生。
