gap生效的前提是父容器显式声明display: flex或inline-flex，且子元素未脱离文档流；Safari 14.0及更早版本不支持gap简写，需拆分为row-gap和column-gap；gap不处理首尾留白，须配合padding使用。
Flex容器必须显式声明display: flex
工具栏按钮组用gap前，父容器没设display: flex或display: inline-flex，gap就完全不生效——浏览器直接忽略该声明，DevTools里也查不到计算值。
常见错误场景：
- 误以为
div默认就是Flex容器，结果写了gap: 12px却毫无反应 - 父容器套了
div再套div，但gap只作用于**直系子元素**，中间多一层就失效 - 按钮用了
float: left或position: absolute，子项已脱离文档流，Flex布局根本接管不了
正确写法示例：
.toolbar {
display: flex;
flex-wrap: wrap; /* 多行时row-gap才起作用 */
gap: 8px;
}
Safari 14.0 及更早版本不认gap简写
真机测试时工具栏按钮“突然贴在一起”，大概率是Safari 14.0（iOS 14.0–14.4）静默跳过了gap: 8px——它支持row-gap和column-gap，但**完全不解析gap简写**，连-webkit-gap都无效。
安全写法必须拆开：
- 等距：写
row-gap: 8px; column-gap: 8px;，别省 - 只想要水平间距（比如横向滚动的标签栏）：
row-gap: 0; column-gap: 12px; - 混用风险：同时写
gap: 16px和row-gap: 8px，后者会覆盖行距，列距却还是16px，视觉失衡
gap不解决首尾留白，得靠padding
gap只管子项之间，不管工具栏左右边缘。设计稿要求“按钮组离左侧16px、右侧也16px”，光靠gap做不到——它不会给第一个按钮左边或最后一个按钮右边加空隙。
必须额外加容器内边距：
-
padding: 0 16px;控制左右留白（垂直方向无间隙可设padding-top/bottom） - 避免用
margin替代：如果工具栏本身是Flex子项，外边距可能被父容器的justify-content干扰 - 响应式切换时，优先改
padding和row-gap/column-gap值，别切回margin逻辑，否则维护两套规则
inline-block按钮组还在用font-size: 0？赶紧换
老项目里常见font-size: 0 + 子元素恢复字号来“吃掉”4px间隙，这方法虽能用，但隐患明显：
- 可读性差：源码里一堆
font-size: 14px重复声明 - 易遗漏：新增按钮忘了设字号，文字就消失了
- 语义断裂：按钮本该是交互单元，却被当成纯文本节点处理
现代解法就是上Flex：
.toolbar {
display: flex;
gap: 8px;
}
.toolbar button {
flex: none; /* 防止按钮被拉伸 */
}
既彻底消灭间隙源，又保留按钮尺寸可控性。
真正容易被忽略的是：gap生效的前提不是“写了就行”，而是整个Flex上下文干净——没浮动、没绝对定位、没display: contents包裹、子项box-sizing统一为border-box。动真格调间距前，先检查这些硬性条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
