Flex容器中gap生效需同时满足：display为flex/inline-flex、多行时设flex-wrap:wrap、子项不因flex-shrink:0撑满容器；水平间距应单独用column-gap，避免混用gap简写与row-gap；旧版Safari需分写row-gap/column-gap；gap与margin叠加导致空隙翻倍，须重置子项margin。
Flex 容器中 gap 生效的硬性前提
哪怕写了 gap: 16px，只要父容器没满足 Flex 布局基础条件，间距就完全不出现。这不是 bug，是规范行为。
必须同时满足以下三点：
-
display: flex或display: inline-flex已生效（display: block下所有gap相关属性都无效） - 若需多行布局（比如视频卡片换行后仍有垂直间距），必须显式加
flex-wrap: wrap；否则row-gap不触发 - 子项不能设
flex-shrink: 0且内容过宽——否则容器被撑满，间隙被“压扁”不可见
只想要横向间距（比如音频轨道列表）
视听模块常需水平紧凑、垂直无额外空隙，例如播放列表、音轨切换栏。这时别用 gap: 12px，它会同时加行列间距。
正确做法是分开声明：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
row-gap: 0—— 确保行间无空隙 -
column-gap: 12px—— 单独控制项目间水平距离 - 避免混用：
gap: 12px和row-gap: 0同时存在时，后者会覆盖行间距，但列间距仍为 12px，视觉上左右不对称
Safari 14.0 及更早版本的兼容写法
这些旧版 Safari 支持 row-gap 和 column-gap，但不支持 gap: 12px 或 gap: 8px 16px 这类简写。强行使用会静默失效。
稳妥方案是放弃 gap 简写，直接写两个独立属性：
row-gap: 12pxcolumn-gap: 12px- 非等距场景（如封面图横向宽松、描述文字垂直紧凑）：用
row-gap: 8px; column-gap: 24px - 不要在同一个 CSS 规则里混用
gap和row-gap，层叠逻辑不可控
gap 和 margin 混用导致的意外空隙
在视听模块中，子项（如 <video></video>、<audio></audio>、封面 <img alt="HTML媒体布局gap怎么设？视听模块间距技巧" >）如果自己带了 margin-bottom，再遇上容器的 gap，视觉空隙会叠加变大。
调试时优先做两件事：
- 清空子项的
margin：比如重置video, audio, img { margin: 0; } - 只靠容器级
gap统一控制，逻辑干净、响应式切换也方便 - 注意：gap 不会和 margin 合并，但会叠加——这是最常被忽略的“空隙翻倍”原因
gap，而是当设计稿要求“第一排视频间距 24px，第二排缩到 8px”时，得意识到 gap 是容器级统一控制——这种差异化必须拆成两个独立容器，而不是试图用选择器去 hack 子项。 
