gap是容器级直接声明的间距值，不依赖子元素尺寸或数量；其双值简写严格按“行先行后”顺序，且仅对flex/grid容器生效，需注意浏览器兼容性及与margin混用规则。
gap 不是“算”出来的，它是直接声明的容器级间距值，不依赖子元素尺寸或数量做换算。 你不需要手动计算每个元素该留多少空——只要父容器是 display: flex 或 display: grid，写上 gap，浏览器就自动在相邻子项之间插入对应空白。
gap 的值怎么写才不会错顺序
很多人写 gap: 1rem 2rem 却以为列间距是 1rem，结果布局歪了。根本原因：gap 的双值简写严格按「行先行后」，不是「左右上下」。
-
gap: 12px→ 行间距 = 列间距 =12px -
gap: 1rem 0.5rem→ 行间距1rem，列间距0.5rem -
gap: 0 8px→ 行间距为0（无垂直空隙），列间距8px（适合横向导航栏） - 别写
gap: 2rem 1rem然后当「左右间距」用——它不是 margin，没有方向映射关系
为什么写了 gap 元素却没看到空隙
常见现象：CSS 里明明白白写了 gap: 16px，但真机上子项紧贴着，DevTools 的 Computed 面板里甚至找不到 gap 这一项。这不是代码漏了分号，而是下面任一条件没满足：
- 父容器没设
display: flex或display: grid（display: block下gap完全无效） - Flex 容器没加
flex-wrap: wrap，但你想让换行后也有行间距——row-gap只在多行时生效 - 子项设了
flex-shrink: 0且内容过宽，把容器撑满，间隙被视觉“压扁”不可见 - Safari ≤14.0（iOS 14.0–14.4）静默忽略所有
gap简写，必须拆成row-gap: 16px和column-gap: 16px
gap 和 margin 混用时到底谁赢
混用不是“叠加”，而是“覆盖 + 错位”。例如：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
div {
display: flex;
gap: 10px;
row-gap: 20px;
}
结果是：行间距 = 20px（row-gap 覆盖了 gap 的行部分），列间距仍为 10px（gap 的列部分未被覆盖）。视觉上就是不对称的“竖松横紧”，很难调试。
- 要么统一用
gap（推荐），要么统一用row-gap+column-gap（兼容 Safari 14.0） - 绝对不要给子项再加
margin来“辅助”gap——这会导致间距翻倍，尤其在 Grid 中grid-auto-flow: dense下更混乱 - 首尾项与容器边缘的留白，
gap从不负责，得靠padding或外层容器控制
真正容易被忽略的点：gap 控制的是“轨道之间”的间隙，不是“元素盒子之间”的距离。当子项高度不一致、vertical-align 默认基线对齐、或没设 box-sizing: border-box 时，即使 gap 值完全正确，视觉节奏也会失衡——这时要先归一化子项，而不是调 gap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
