gap属性最省事，现代浏览器（chrome 84+、firefox 63+、safari 14.1+）均支持，适用于grid和flex容器，统一控制子项间距且不作用于容器边缘，比margin更可靠；IE完全不支持。
直接用 gap 属性最省事，但得看浏览器支持情况
现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）都支持 gap，且在 display: grid 和 display: flex 容器上行为一致：统一控制子项之间的间距，不作用于容器边缘。它比手动写 margin 更可靠，不会因首尾元素多出空白而破布局。
注意：IE 完全不支持 gap；旧版 Safari（flex 容器的 gap 支持不完整（可能只生效于行内方向）。
grid 下 gap 的写法和常见误区
gap 在 Grid 中可接受单值（行列同距）、双值（row-gap column-gap）或三个及以上值（仅 css Grid Level 2 支持多轴语法，暂不推荐）。
-
gap: 12px→ 行距 = 列距 = 12px -
gap: 12px 8px→ 行距 12px，列距 8px（顺序是row-gap column-gap） - 别写成
gap: 12px 8px 12px 8px—— 这不是 margin，不支持四值语法 - 若同时设了
row-gap和column-gap，它们会覆盖gap的对应部分
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } flex 下 gap 的兼容性细节和替代方案
Flex 的 gap 虽然语义清晰，但旧版 Safari（14.0）和部分安卓 WebView 有渲染异常：比如换行后第二行子项顶部没间隙，或 justify-content: center 时间隙错位。
立即学习“前端免费学习笔记（深入）”；
如果必须兼容这些环境，可用以下方式降级：
- 用
margin模拟：给每个子项加margin-right和margin-bottom，再用:nth-child清除末尾项的右/下边距 - 避免用
gap+flex-wrap: wrap+justify-content: space-between组合——某些浏览器会把间隙算进总宽导致换行异常 - 测试时重点检查最后一行和最后一列是否漏间隙
要不要用 gap？关键看你的项目约束
如果目标用户基本跑在 Chrome/Firefox/Safari 14.1+，直接上 gap，代码干净、逻辑直白、维护成本低；如果还要保 iOS 13 或 Android 9 以下 WebView，就得绕开 gap，老实用 margin + :not(:last-child) 控制。
另外，gap 不影响 align-items 或 justify-content 的计算基准，这点比 margin 更稳定——但很多人会忽略：当子项本身有 margin 时，gap 是额外叠加的，不是替代，容易造成间距翻倍。