Grid容器的直系子项不会发生Margin Collapse，因其脱离普通文档流，外边距不参与间距计算，由gap属性控制间距；但嵌套的孙级块元素间仍可能触发合并。
Grid容器里的子项还会发生Margin Collapse吗
不会。只要父容器设了display: grid（或display: inline-grid），其直接子元素就自动脱离普通文档流的块级格式化上下文（BFC），垂直方向的margin-top/margin-bottom完全失效——不是被合并，而是根本不再参与计算。
这是Grid布局的底层行为，和Flex类似，但更彻底：子项的外边距对齐、间距控制全部让位于gap属性。你给子项写margin: 20px，它依然会撑开自身盒模型，但不会影响相邻子项的距离。
为什么加了display: grid后子项margin突然“不生效”
这不是bug，是规范明确要求的行为：Grid容器的子项称为grid items，它们的外边距在主轴（row）和交叉轴（column）方向上均不参与collapse，也不用于控制item间距离。浏览器会忽略子项的margin在grid track之间的贡献。
- 如果你看到子项之间仍有空隙，那大概率是
gap值，不是margin - 子项自身的
margin仍会影响它内部内容与边框的距离，或与容器padding的相对位置 - 若子项是嵌套的块级元素（比如
div里再包一个p），那个p的margin仍可能在其父div内触发collapse——但这是子孙层级的事，和grid无关
Grid中想保留margin语义怎么办
不能强行“恢复”子项margin对grid间距的影响，但有几种现实路径：
- 统一用
gap替代：这是最干净的做法，gap支持row-gap/column-gap单独控制，也支持响应式单位（如gap: clamp(8px, 2vw, 16px)） - 把需要
margin逻辑的元素移出grid子项层级：比如让grid只负责布局骨架，真正带间距的卡片用padding或border隔离 - 用
margin做微调而非主控：例如某个子项需额外下移，可用margin-bottom: 8px，它不会影响其他item，只是撑大自身grid area高度
Grid + Flex混用时Margin Collapse还存在吗
取决于层级。Grid容器的直系子项不collapse；但如果某个grid item内部是display: flex; flex-direction: column，那它的子元素（即grid的孙元素）之间仍可能触发collapse——只要它们是块级、相邻、且父flex容器没触发BFC。
这时候问题已不在Grid层，而回到传统流式布局的老问题：
- 如果孙元素是连续
，推荐给该flex容器加display: flow-root或padding-top: 0.1px - 避免在flex item上滥用
overflow: hidden，尤其当它要显示tooltip或下拉菜单时 - 更推荐直接用flex的
gap替代孙元素的margin，一劳永逸
真正容易被忽略的是：Grid本身不解决所有margin问题，它只接管直系子项。一旦嵌套加深，老问题照旧出现——而这时开发者常误以为“用了Grid就万事大吉”，结果在孙层级调试半天才发现是父子collapse又回来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
