gap只在display:flex或grid容器上生效；若父容器非二者之一，浏览器会静默忽略该属性。
直接加 gap 不起作用，是因为它只在 display: flex 或 display: grid 容器上生效——不是所有容器都能用，也不是所有“间距需求”都该用 gap。
gap 必须配合 display: flex 或 display: grid 才能生效
给一个普通 <div> 加 <code>gap: 16px，浏览器会静默忽略。必须先让它成为 Flex 或 Grid 容器：
- Flex 场景：父元素设
display: flex或display: inline-flex，再加gap - Grid 场景：父元素设
display: grid（或inline-grid），并定义grid-template-columns等轨道 - 如果子项用了
display: none、visibility: hidden或被display: contents包裹，gap对它们不产生间隙 - Flex 换行后要显示行间距，必须加
flex-wrap: wrap；否则row-gap不触发
gap 值怎么写才不出错
gap 的语法看似简单，但顺序和单位容易踩坑：
- 单值写法：
gap: 12px→ 行距和列距都是12px - 双值写法：
gap: 8px 16px→ 第一个是row-gap（行间距），第二个是column-gap（列间距），和 margin 的“上下左右”无关 - 单位必须明确：
gap: 1无效；gap: 1rem、gap: 2em合法；%只在 Grid 列间距中部分支持，别在 Flex 里用 - 默认值是
normal（约等于1em），但行为不稳定，建议显式写死
移动端 Safari 14.0 兼容必须拆开写 row-gap 和 column-gap
Safari 14.0（iOS 14.0–14.4）完全不识别 gap 简写，包括 gap: 16px 和 gap: 8px 16px。DevTools 的 Computed 面板里根本看不到该属性。
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计算，视觉失衡 -
-webkit-gap在 Safari 14.0 中也无效，别加前缀白费力气
gap 不管首尾留白，padding 和 margin 还得各司其职
gap 只控制“子项之间”，从不控制“子项到容器边缘”。这是最容易混淆的点：
- 想让第一项离顶部有空隙？用父容器的
padding-top - 想让最后一项离底部留空？用父容器的
padding-bottom - 想让整组左/右缩进？用
padding-left/padding-right，不是靠gap推 - 子项自己加了
margin？小心叠加：比如gap: 12px+ 子项margin-bottom: 8px，实际间距变成20px，且无法响应式统一调整 - 调试时优先清掉所有子项的
margin，只靠gap控制内部间距，逻辑更干净
真正难的不是写对 gap，而是意识到它只解决“直系子项之间”的问题——嵌套层级、首尾留白、边框内距、不对称分组，这些都得靠其他机制配合。一上来就堆 gap，反而会让布局越来越难维护。
