必须先清子项margin再设容器gap，否则二者叠加导致间距翻倍或错位；gap作用于子项之间，margin属于子项自身盒模型，不合并但直接相加。
gap 和 margin 混用时，顺序不重要，但作用对象和叠加逻辑必须分清——先清子项 margin，再设容器 gap，否则视觉间距会翻倍或错位。
gap 只作用于子项之间，margin 是子项自己的外边距
gap 是容器级属性，它在 Flex/Grid 的“轨道间隙”中插入空白；margin 是子项盒模型的一部分，向外撑开自身边界。两者不合并、不抵消，而是直接相加。
- 比如容器设了
gap: 12px，子项又写了margin-bottom: 8px，那相邻两项之间实际空隙是12px + 8px = 20px - 若子项还设了
margin-top: 4px，则顶部空隙变成12px + 4px = 16px（gap 不管首项上方） - 这种叠加在响应式切换或动态增删子项时极易失控，尤其当某些子项 conditional 渲染后 margin 不一致
为什么不能靠 margin 来“补 gap 没覆盖的边缘”
gap 天然不控制首项前、末项后的留白，有人会想：那给第一个子项加 margin-top，最后一个加 margin-bottom 补齐？这会导致三类问题：
- 首尾子项的 margin 会和父容器的 padding 或 border 发生外边距合并（margin collapse），尤其在 block 流中不可预测
- Flex 容器里若用了
align-items: flex-start，margin-top可能被忽略或表现异常 - Grid 中若启用了
grid-auto-flow: dense，手动加的 margin 可能干扰重排，造成空行或错位
真要混用，只允许一种安全模式
仅在明确需要某个子项“额外偏移”时才加 margin，并且必须满足三个前提：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 子项 margin 必须是单向的（比如只设
margin-left，不碰上下） - 容器 gap 值需固定，不能用百分比或函数（
gap: minmax(1rem, 2vw)会让叠加计算失效） - 必须用
@supports (gap: 1px)包裹 gap 声明，避免老 Safari 把 gap 当无效声明跳过，却仍执行子项 margin，导致空白消失
示例安全写法：
@supports (gap: 1px) {
.list {
display: flex;
flex-direction: column;
gap: 16px;
}
.list > .highlight {
margin-left: 24px; /* 仅水平偏移，不破坏垂直节奏 */
}
}
移动端 Safari 14–15.4 的 gap 简写静默失效
这不是 bug，是规范实现差异：Safari ≤15.4 支持 row-gap 和 column-gap，但完全忽略 gap 简写（包括 gap: 16px 和 gap: 8px 16px）。DevTools 的 Computed 面板里根本看不到 gap 值。
- 错误写法：
gap: 16px→ 在真机上空白消失，开发者常误以为 CSS 没加载 - 正确写法：
row-gap: 16px; column-gap: 16px;，所有现代移动浏览器都支持 - 如果用了双值简写
gap: 8px 16px，务必确认顺序：首值是row-gap，次值是column-gap，记反了就会错位
真正容易被忽略的是：gap 的生效前提是父容器必须是 display: flex 或 display: grid，且子项不能被 display: contents 或 float 脱离渲染树——这些条件缺一，gap 就彻底失效，连 warning 都不会报。
