gap仅在display: flex或grid容器中生效，对block等其他display值静默忽略；需确保父容器正确设置且子项相邻，避免与margin混用导致间距叠加。

gap 只在 flex 或 grid 容器里生效

直接给 <div> 或 <code><p></p> 加 gap: 1rem 没反应，不是写错了，是它根本没资格用。gap 是布局层原生属性，只认两种父容器：display: flex 或 display: grid。其他任何情况（比如 block、inline-block）下，浏览器静默忽略。

常见误操作包括：

• 在 <nav></nav> 上写了 gap，但忘了给里面的 <ul></ul> 设 display: flex
• 用 CMS 输出的 HTML 套了多层 <div>，实际子项离 flex 容器隔了两层，gap 失效 <li>父容器用了 <code>display: contents，它会让子元素“冒泡”上去，但 gap 不会跟着上浮

gap 的值顺序容易写反：行先、列后

写 gap: 12px 8px 时，第一个值是 row-gap（行间距），第二个才是 column-gap（列间距）。这不是 margin 的“上下左右”，也不是“宽高”，顺序固定不可颠倒。

典型翻车场景：

立即学习“前端免费学习笔记（深入）”；


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 想让卡片横向宽松、纵向紧凑，却写成 gap: 16px 8px → 实际是行距 16px、列距 8px，视觉上反而竖着松、横着紧
• 在 Grid 中设 gap: 0 1rem，本意是取消行距、只留列距，结果生效了，但开发时反复怀疑是不是浏览器 bug
• Safari ≤14.0 不支持双值 gap，得拆成 row-gap: 12px; column-gap: 12px; 才稳

gap 不管首尾留白，那部分得靠 padding

gap 只控制“相邻子项之间”的间隙，对子项与容器边缘完全不管。所以你看到卡片贴着容器左边、右边没空隙，不是 gap 没起作用，是它本来就不负责这事。

正确做法是组合使用：

• 容器设 padding: 1.5rem 控制四周呼吸感
• 内部子项用 gap: 1.25rem 控制彼此距离
• 避免同时给子项设 margin，否则 gap + margin 叠加，间距变大且难调试
• 若需首项前/末项后额外空隙，只能靠 padding 或显式加空的伪元素（不推荐）

Flex 换行时 row-gap 不生效？检查 flex-wrap

在 Flex 布局中，row-gap（即双值 gap 的第一个值）只有在多行时才起作用。如果所有子项能单行塞下，flex-wrap: wrap 没触发，row-gap 就等于没写。

验证和修复步骤：

• 给容器加 flex-wrap: wrap（即使当前没换行，也得声明）
• 临时加 min-width: 0 或缩小窗口，确认是否真换行
• 别依赖 justify-content: space-between 来“撑开”行距——它只影响主轴，和 row-gap 无关
• Grid 中 row-gap 更可靠，因为只要定义了多行轨道，它就一定生效
真正难的不是让 gap 显示出来，而是当设计稿要求“顶部导航间隙 16px、中间卡片 24px、底部按钮组 8px”时，你得意识到 gap 是容器级统一控制——这种差异化，必须拆成三个独立容器，而不是试图用选择器去改某个子项的 margin。