gap生效需父容器设display: flex或grid，且Safari 14.0+须分写row-gap/column-gap；它不控制首尾留白、不兼容display: contents，也不支持百分比或负值。
gap 不是万能胶，它只在 flex 或 grid 容器里起作用；写对了但没效果，八成是父容器没设 display: flex 或 display: grid。
Flex 容器中 gap 生效的硬性前提
哪怕你写了 gap: 12px，只要父元素没满足以下任一条件，间隙就根本不会出现：
-
display必须是flex或inline-flex（block、inline、contents都无效） - 需要换行后仍有行间距？必须加
flex-wrap: wrap，否则row-gap不触发 - 子项不能设
flex-shrink: 0且内容过宽——否则容器被撑满，“间隙”被视觉压扁 - 别用
display: contents包裹子项，它会让子项脱离渲染树，gap失去作用对象
Safari 14.0 及更早版本 gap 失效的真实原因
这不是 bug，是规范实现差异：Safari 14.0（对应 iOS 14.0–14.4）完全忽略 gap 简写，包括 gap: 16px 和 gap: 8px 16px。DevTools 的 Computed 面板里根本看不到 gap 值，它静默跳过。
但 row-gap 和 column-gap 是支持的。所以移动端安全写法只有一条：
立即学习“前端免费学习笔记（深入）”；
- 永远分开写：
row-gap: 12px; column-gap: 12px;（等距） - 非对称场景直接拆：
row-gap: 8px; column-gap: 24px;（如卡片列表垂直紧凑、水平宽松） - 只想要列间距？
row-gap: 0; column-gap: 12px;（比如横向滚动导航栏） - 别混用：
gap: 16px和row-gap: 8px同时存在时，后者会覆盖行间距，列间距却还是 16px，视觉失衡
gap 和 margin 在数据展示中的关键区别
gap 是布局层原生控制，只在相邻子项之间生效，不参与盒模型计算；margin 是每个元素自己的外边距，会溢出容器、触发折叠、干扰对齐逻辑——尤其在动态增删、响应式或多行表格类布局中极易错位。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
常见误用场景：
- 首尾留白靠
gap？不行。gap只管子项之间，不管容器边缘。得用padding，比如padding: 0 16px控制左右内边距 - 想让第一组卡片间距 24px、第二组缩到 8px？
gap是容器级统一控制，必须拆成两个独立容器，而不是用:nth-child去 hack 子项 - 子项尺寸不一致（图片宽高不同、
vertical-align默认基线对齐）会导致“数学等距”但视觉歪斜，动手前先统一box-sizing: border-box和尺寸基准
Grid 布局中 gap 的简写陷阱
gap 支持双值简写，但顺序固定：第一个值是 row-gap（行间距），第二个是 column-gap（列间距），不是“上下/左右”，也和 margin 的顺无关。
错误示例：gap: 1rem 2rem 被理解为“行距 1rem、列距 2rem”，若误以为列距是 1rem，布局就会错位。
其他限制：
-
gap不支持百分比值（grid中column-gap除外，但基于容器内联尺寸，实际效果常偏小） - 不支持负数，也不允许
calc()直接嵌套在简写里，如gap: calc(1rem - 2px) 1fr是非法的 -
gap: 0或gap: unset可显式关闭；默认值normal行为不稳定，别依赖
真正难的不是写对 gap，而是意识到它无法解决首尾留白、差异化间距、流式内容分栏这些需求——那些地方得靠 padding、独立容器或 column-count 等方案补位。
