用 gap 替代 margin 是解决网格布局间距不一致的根本方法，因 margin 在 grid 中会折叠、溢出且受盒模型影响，而 gap 作用于轨道间、不冲突、易控制。
用 gap 替代元素内部的 margin，是解决网格布局中因盒模型（border/padding/margin）导致间距不一致的根本方法。
为什么 margin 会让网格间距变“乱”？
在 display: grid 容器中，如果给子项设置 margin，这些外边距不会被网格系统统一管理：
- 相邻项的 margin 会合并（比如上下两个 item 的 margin-bottom/margin-top 可能折叠）
- 边缘项的 margin 会“溢出”容器，造成不对称留白
- 当子项有 border 或 padding 时，margin 计算叠加盒模型，视觉间距难以预测
gap 是专为网格/弹性布局设计的间隙控制属性
gap（或 row-gap/column-gap）作用于网格轨道之间，完全绕过单个子项的盒模型：
- 只在行与行、列与列之间插入等距空白，不涉及子项自身尺寸
- 不会与 margin/border/padding 发生冲突或折叠
- 支持所有长度单位（px, rem, %），也支持
normal
示例：
立即学习“前端免费学习笔记（深入）”；
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }实际替换步骤（三步走）
- 移除所有子项上的
margin（特别是margin-right/margin-bottom类清空逻辑） - 在父级 grid 容器上设置
gap，数值等于你原本期望的“项间距离” - 如需控制容器内边距（即第一行/列离容器边缘的距离），改用
padding而非靠子项 margin 模拟
补充：flex 布局也能用 gap（现代浏览器基本支持）
如果你用的是 display: flex，同样建议优先使用 gap 而非 margin：
- Flex 容器支持
gap（Chrome 84+/Firefox 63+/Safari 14.1+） - 对旧浏览器可加
fallback：用margin+:not(:last-child)限制，但新项目直接上gap更干净
基本上就这些。用对 gap，网格间距立刻规整，也不用再算 border-box 和 margin-collapse 的账了。
