gap仅在display: flex或grid容器上生效，对block等无效；需先设外层Grid结构，再于子容器中启用gap；Safari 14.0–14.4需拆分为row-gap/column-gap；gap不控制首尾留白，须用padding。

gap 只在 Flex/Grid 容器上生效，不是通用间距工具

直接给 <div class="view"> 加 <code>gap: 16px 没反应？因为它默认是 display: block，而 gap 只对 display: flex 或 display: grid 容器起作用。单页应用里常见的“视图模块”（比如顶部导航、侧边栏、主内容区、底部状态栏）属于宏观区域划分，必须先用 Grid 建立外层容器结构，再在需要子项等距的局部启用 gap。

外层用 Grid 划分区域，内层用 gap 控制模块间距

别用多层嵌套 Flex 堆出页眉+侧边栏+主内容+页脚——高度不一致、换行错位、断点失效会集中爆发。Grid 是唯一能同时约束行列的模型，且天然支持 gap。

• 外层容器设 display: grid，用 grid-template-areas 定义语义区域，例如："header header" "sidebar main" "footer footer"
• 每个区域（<header></header>、<aside></aside>、<main></main>）本身可再设 display: flex 或 display: grid，此时才能加 gap 控制其内部子模块（如按钮组、卡片列表、筛选表单）之间的间距
• 例如主内容区里放 4 张数据卡片：.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }

Safari 14.0 及更早版本不认 gap: 16px，必须拆开写

你在 iOS 14.0–14.4 真机上看到视图模块贴在一起？不是 CSS 没加载，是 Safari 静默忽略所有 gap 简写（包括单值和双值）。它只认 row-gap 和 column-gap。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 安全写法永远是分开声明：row-gap: 16px; column-gap: 16px;
• 非对称场景更清晰：row-gap: 8px; column-gap: 24px;（卡片列表垂直紧凑、水平宽松）
• 别混用：gap: 16px 和 row-gap: 8px 同时出现时，后者会覆盖行间距，列间距却仍为 16px，视觉失衡

gap 不管首尾留白，padding 才负责容器边缘

gap 只控制直系子元素之间，从不作用于第一个子项与容器上边、最后一个子项与容器下边。所以你会看到：卡片网格左右贴边、顶部紧贴导航栏、底部压到页脚——这不是 gap 失效，是你忘了加 padding。

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

• 左右留白统一用容器 padding: 0 16px
• 顶部/底部呼吸感用 padding-top 或 padding-bottom，而不是靠子项的 margin-top
• 若设计稿要求“第一组卡片间距 24px、第二组缩到 8px”，gap 无法差异化控制——必须拆成两个独立容器，各自设不同 gap 值

真正难的不是让 gap 生效，而是意识到它只解决“子项之间”这一层问题；一旦涉及容器边缘、嵌套层级、跨浏览器一致性或设计稿里的非统一间距需求，就得立刻切换到 padding、媒体查询拆容器、或回退到 :not(:first-child) + margin 的组合策略。