嵌套grid中p标签外边距重叠是标准流下的margin-collapse行为，与gap无关；gap仅作用于网格直接子项间，而p元素内部仍按块级流合并margin，实际间距取较大值。
嵌套 Grid 中的外边距重叠不是 Grid 的 bug，而是 margin-collapse 在标准流中自然发生的盒模型行为——它和 gap 无关，也压根不会被 gap 拦住。
为什么 grid-gap 设了 24px，p 标签之间还是只显示 16px
因为 gap 只控制网格容器内**直接子项之间的轨道间隙**，而子项内部的 p 元素仍走普通块级流，它们的 margin-top 和 margin-bottom 会按规则合并。比如两个 p 分别设了 margin-bottom: 20px 和 margin-top: 12px，实际垂直间距是 20px（取较大值），不是 32px。
- DevTools 的 “Computed” 面板里看到的
margin-top值可能被标记为 “collapsed”，这就是证据 - 常见于用
normalize.css或现代 CSS 库的项目，p、h2等默认带 margin - 响应式断点切换时，如果只改了
grid-template-columns却没重置子项内部 margin，问题会突然复现
嵌套 Grid 容器里该给谁加 display: flow-root
必须加在**包含那些会重叠的子元素的父容器上**，且这个容器得是这些子元素的**直接父级**。比如：
.grid-item {
display: grid;
gap: 8px;
}
.grid-item > p {
margin: 16px 0;
}
这里重叠发生在 .grid-item 内部的 p 之间，所以要修复，就得让 .grid-item 自身触发 BFC：
-
.grid-item { display: flow-root; }✅ 正确：BFC 隔离了内部p的 margin -
.grid-item > p { display: flow-root; }❌ 错误：每个p自己建 BFC，但兄弟间 margin 仍可能合并（取决于是否相邻） - 给外层 Grid 容器加
display: flow-root没用——它不作用于孙子级的p
padding-top: 0.1px 比 border-top: 1px solid transparent 更轻量
两者都能打断父子 margin-collapse，但 padding-top: 0.1px 不引入额外视觉干扰或尺寸变化，特别适合封装好的组件场景——你无法改子元素 margin，只能动父容器样式。
- 适用于第三方组件包裹的 Grid 项，例如：
<antdcard><div class="grid-item">...</div></antdcard>，此时在.grid-item上加padding-top: 0.1px就能稳住顶部空隙 - 注意：不能写成
padding: 0.1px 0，否则左右 padding 也会生效，可能影响对齐 - 如果项目需兼容 IE 或 Safari padding-top: 0.1px 是比
display: flow-root更稳妥的选择
响应式嵌套中容易被忽略的“双重重叠”陷阱
小屏幕下，Grid 容器变成单列，子项堆叠变密，这时两个问题常叠加出现：一是子项内部 p 的 margin 合并；二是子项自身因 box-sizing: content-box + padding 溢出轨道，导致视觉错位，看起来像重叠。
- 调试时先关掉所有媒体查询，确认基础布局是否正常
- 用 DevTools 的 “Show box model” 对比
.grid-item的border-box总宽和它所在网格轨道的分配宽度，差值超过 1px 就说明box-sizing没统一 - 全局加
* { box-sizing: border-box; }是起点，但记得排除.ant-card这类依赖content-box的组件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
