safari 14.1–15.6中flex容器gap在单行（flex-wrap: nowrap）下失效，需强制设flex-wrap: wrap；grid中gap双值语法为row-gap column-gap，不支持四值写法；gap与margin叠加会加倍间距，且grid gap不影响子项到容器边框距离，需额外设padding。
Flex容器里gap不生效？先看flex-wrap
直接写display: flex; gap: 12px在Chrome/Firefox里没问题，但在Safari 14.1–15.6中会完全失效——computed styles里gap显示为0px。这不是你漏写了什么，是Safari早期对单行Flex（flex-wrap: nowrap）下gap的支持缺失。
解决办法很直白但容易跳过：
- 强制加
flex-wrap: wrap，哪怕你视觉上只要一行 - 配合
min-width: 0或flex: 0 0 auto防换行 - 或者用
flex-wrap: wrap; min-width: 100%; justify-content: center模拟“视觉单行+gap”
Grid中gap双值语法别搞反顺序
gap: 8px 12px不是“上下/左右”，而是严格按轴向：第一个值是row-gap（行间距），第二个是column-gap（列间距）。写成gap: 8px 0真会让列间距变成0，子项紧贴——0是有效值，不是“关闭”。
常见踩坑点：
- 误用四值语法
gap: 8px 12px 8px 12px——gap不支持margin式写法 - 同时声明
row-gap和gap，后者会覆盖前者的行间距部分 - 用
grid-template-columns: repeat(3, 1fr)+gap: 20px时，总宽 = 3×列宽 + 2×20px，别忘了这个额外开销
gap和margin叠加会导致间距翻倍
gap是容器级控制，margin是子元素自身属性，两者不冲突但会叠加。比如容器设了gap: 10px，某个子项又写了margin-right: 10px，右边实际空出20px。
这些场景特别容易翻车：
-
justify-content: center时，给第一个子项加margin-left，整行左偏，居中失效 - 卡片列表中个别卡片加了
margin-bottom做强调，结果和gap叠加导致底部多出一倍空白 - 响应式断点里只调了
gap，忘了清掉之前写的margin，造成意外溢出
建议：统一用gap控常规间距；真要差异化，优先改子项margin并同步把对应方向的gap设为0。
响应式缩放gap时单位选错会失衡
gap支持px、rem、%、clamp()，但不同单位行为差异大：
- 用
%（如gap: 2%）时，值基于容器宽度计算，在Flex中列间距随屏宽缩放，但行间距也跟着变——可能小屏时行距过小 -
rem随根字体缩放，适合保持视觉节奏，但需搭配媒体查询微调（如手机端gap: 0.75rem，桌面端1.5rem） -
clamp(0.5rem, 2.5vw, 1.25rem)能兼顾最小/最大限制和中间弹性，但需测试各端真实渲染效果
真正容易被忽略的是：Grid中gap只作用于网格线之间，不会让子项离容器边框更远——如果你发现子项紧贴上边或左边，不是gap没起作用，而是你没给容器设padding。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
