gap是Flex/Grid容器的轨道间隙控制器，仅在display:flex/grid生效；错误添加到普通div会被忽略；语法为row-gap column-gap，非上下左右；不支持选择性控制，需拆分容器实现差异化间距。
gap 不是“加间距”的万能开关，而是容器级的轨道间隙控制器——用错地方，反而让布局更难调。
gap 只在 Flex/Grid 容器里生效，别给普通 div 加
看到设计稿上模块之间有 24px 间距，第一反应不是写 gap: 24px，而是先确认父容器是否已启用布局上下文：
- 必须有
display: flex或display: grid（inline-flex/inline-grid也行） - 子元素不能是
display: contents或被display: none隐藏（它们不参与布局计算） - Flex 容器若需 row-gap 生效，得加
flex-wrap: wrap；否则多行不会产生行间间隙 - Grid 容器若只设了
column-gap却没写row-gap，而实际渲染多行，视觉上就像“gap 没起作用”
常见错误：.section-group { gap: 16px; } 却忘了加 display: flex——浏览器静默忽略，你还在调试 margin 合并。
gap 值怎么写？双值顺序不是“上下左右”
gap 的语法和 margin 完全不同，记错顺序会导致列/行间距错乱：
-
gap: 8px→ 行间距和列间距都是 8px -
gap: 8px 16px→ 第一值是 row-gap（行间距），第二值是 column-gap（列间距），不是“上下/左右” -
gap: 0或gap: unset才能真正关闭；gap: normal行为不稳定，别依赖 - 单位必须明确：
gap: 1无效；gap: 1rem、gap: 2%（仅 Grid 列间距支持 %）合法
典型踩坑：gap: 16px 8px 写反了，结果卡片垂直堆叠太紧、水平却松垮——这不是设计问题，是语法理解偏差。
多个区块间距不一致？gap 不支持选择性控制
gap 是容器级统一策略，它不管你是第一个卡片还是最后一个。当设计稿要求“顶部导航栏下距 32px，主内容区与侧边栏之间 16px，底部版权栏上距 24px”，别试图用 :nth-child() 给子项加 margin 来“模拟”差异化 gap——这会破坏 Flex/Grid 的布局契约。
- 正确做法：拆成多个独立容器，每个配自己的
gap - 例如：
包在另一个display: flex容器里，再各自设gap - 避免混用：
gap: 16px和row-gap: 8px出现在同一条 CSS 规则里，后者会覆盖前者，行为不可控 - 如果真要微调单个区块位置，优先用
margin（比如margin-top: -8px），但这是 hack，只用于极少数对齐补救
真正难的不是写对 gap，而是意识到：**当间距规则开始分层、分区域、分状态时，gap 就不再是“设置”，而是“划分容器边界”的信号。**
兼容性兜底和 Safari 旧版陷阱
2026 年多数项目已可放心用 gap，但 Safari 14.0 及更早版本仍存在硬伤：
- 不支持
gap: 12px 8px双值写法，也不支持单值gap: 12px - 稳妥写法是显式分开：
row-gap: 12px; column-gap: 12px; -
@supports (gap: 1rem)在 Safari 14.0 下返回 false，无法可靠检测，服务端 UA 判断或 JS 特性检测更稳 - IE 全系不支持，且无优雅降级方案——如果还要兼容 IE，
gap就不该出现在生产 CSS 中 - 别用百分比值做
gap：仅 Grid 的column-gap支持 %，Flex 不支持，写了也无效
最后提醒一句：gap 的干净，来自容器语义的清晰。如果你发现某个 gap 总是“不起作用”，先检查父容器 display 是否被其他规则覆盖（比如被 display: contents 消解），而不是立刻怀疑浏览器 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
