gap仅在flex或grid容器中生效；常见失效原因包括父容器未设display:flex/grid、子项被display:contents包裹、flex-wrap缺失、Safari≤14.0不支持简写、与margin混用逻辑混淆、flex-shrink:0挤占空间、CSS Columns中无效等。
gap 不是万能胶，它只在 display: flex 或 display: grid 容器里起作用；写在 block 或 inline-block 上等于没写。
为什么 gap 看起来“失效”了
最常见的情况不是代码写错，而是父容器根本没进入 Flex/Grid 布局模式：
-
display没设成flex或grid—— 比如只写了gap: 12px却漏掉display: flex，浏览器直接忽略该声明 - 子元素被
display: contents包裹，导致它们脱离渲染树，gap失去作用对象 - 用了
flex-wrap: wrap却忘了加它——没有换行，row-gap就不会触发（单行 Flex 中只有column-gap生效） - Safari ≤14.0（iOS 14.0–14.4）完全不认
gap简写，DevTools 的 Computed 面板里压根不显示，必须拆成row-gap和column-gap
gap 和 margin 混用时的视觉陷阱
两者逻辑不同，混在一起容易“算不清”：
-
gap只管直系子项之间，**不管首尾与容器边缘的距离**；想留白得靠padding，别指望gap替你扛 - 同时写
gap: 16px和row-gap: 8px：后者会覆盖行方向间距，但列方向仍为 16px，结果就是“上下紧、左右松”，不对称 - 用
margin给每个子项加右距再清最后一个，遇上动态增删或响应式换行，:nth-child(last-of-type)就不可靠；而gap天然适配数量变化 - Flex 容器中子项设了
flex-shrink: 0且内容过宽，间隙会被“挤没”——不是gap失效，是空间被占满了
移动端和老 Safari 的兼容写法
真机上空白消失？大概率是 Safari 14.0 的锅，不是你 CSS 写得差：
立即学习“前端免费学习笔记（深入）”；
- 安全写法永远是分开声明：
row-gap: 12px+column-gap: 12px，所有现代移动浏览器都认，包括 Safari ≥14.0 - 别试
-webkit-gap——Safari 14.0 连这个都不支持，白加 - 平板断点（768px–1024px）要单独调值：列数变少后，原
gap: 2rem显得拥挤，建议降为1.25rem，并确保html { font-size }是响应式的（比如用clamp()） - 如果容器是 CSS Columns（
column-count），gap完全无效，必须用column-gap，且同样要双写-webkit-column-gap
表单、卡片等管理后台高频场景怎么用 gap
这类结构固定、子项语义明确的场景，gap 是首选，但得配合变量和布局前提：
- 统一用 CSS 变量定义间距标尺，比如
:root { --space-md: 16px; }，然后写gap: var(--space-md)，改一处全局生效 - 表单组用 Flex：
.form-group { display: flex; gap: 8px; align-items: center; }，比手动算margin-right干净得多 - 卡片网格用 Grid：
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); row-gap: 24px; column-gap: 16px; } - 首尾留白一律走容器
padding，比如padding: 0 16px控制左右边距，和gap各司其职
真正容易被忽略的是：gap 的值会影响可用空间计算。比如 grid-template-rows: repeat(3, 1fr) 配 row-gap: 20px，实际占用高度 = 3 行内容高度 + 2 × 20px，不是 3 × 20px——这点在做精确高度控制或滚动锚点时，常被漏掉。
