gap仅在flex/grid容器中生效，普通block/table布局无效；Safari 14.0+需用row-gap/column-gap替代；首尾留白须配合padding；推荐用CSS变量统一管理间距。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

gap只在Flex/Grid容器里生效，别往

或上硬加

写了gap: 16px却没反应？先看父元素是不是display: flex或display: grid。普通div默认是block，table是table，这两个布局模式下gap完全被忽略——浏览器不报错，也不计算，DevTools 的 Computed 面板里压根看不到它。

常见误操作：

• 给<table>加<code>gap，想控制列间距 → 实际该用border-spacing
• 给表单外层div设gap但没写display: flex → 子项还是堆在一起
• 用display: contents包裹子项 → 子项脱离渲染树，gap失去作用对象

Safari 14.0 及更早版本不认 gap: 16px，必须拆成 row-gap/column-gap

真机测试时发现间距消失，不是 CSS 没加载，是 Safari 14.0（对应 iOS 14.0–14.4）静默忽略所有gap简写，包括gap: 16px和gap: 8px 16px。它只认row-gap和column-gap两个独立属性。

安全写法就是始终分开声明：

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

• 等距场景：row-gap: 16px; column-gap: 16px;
• 卡片列表横向宽松、纵向紧凑：row-gap: 8px; column-gap: 24px;
• 只想要列间距（比如水平滚动导航栏）：row-gap: 0; column-gap: 12px;

别混用gap和row-gap，否则row-gap会覆盖行方向，列方向却仍走gap的值，视觉失衡。

首尾不留白是 gap 的天然缺陷，必须靠 padding 补位

gap只管子项之间，不管容器边缘。所谓“左右留白 16px、中间等距”这种需求，不能靠gap解决——它天生不负责首尾。

正确做法是组合使用：

• 容器加padding: 0 16px控制左右内边距
• 内部 Flex/Grid 容器用row-gap/column-gap控制子项间距
• 媒体查询中调整间距时，优先改row-gap值，而不是切回margin——否则逻辑割裂，后期维护成本飙升

如果设计稿要求“第一组卡片 24px、第二组 8px”，别试图用.group-1 > *:not(:last-child)加margin，直接拆成两个独立容器，各自设row-gap。

CSS 变量统一定义间距标尺，别在每个组件里硬写 margin: 12px

硬编码margin: 12px或padding: 8px到每个组件里，等于埋雷：后期改一个数值就得全局搜替换，极易漏改或冲突。

必须用 CSS 自定义属性提前约定一套可复用的间距标尺，推荐在:root中定义：

code:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

然后在布局中直接引用：

• .card-grid { display: grid; gap: var(--space-lg); }
• .form-group { display: flex; gap: var(--space-md); }

变量名带单位（px），避免calc()时单位缺失报错；只定义偶数步进值，适配 1x/2x 屏幕缩放更稳；不定义--space-0，直接用0更清晰。

最常被忽略的一点：gap 不是万能胶，它是布局模型的副产品，不是通用间距工具。选对容器类型（Flex/Grid），再配合适当的 CSS 变量和兼容写法，才能真正把空白“管住”。