正确做法是将--gap变量定义在父容器上，子元素通过var(--gap)配合calc()计算margin，避免设在子元素导致首尾多余空隙；gap仅适用于grid和较新flex，跨布局复用或兼容旧浏览器时必须用变量+calc()。
用 --gap 变量 + calc() 控制子元素间距
直接改 margin 容易和父容器 padding 冲突，也难统一响应式调整。正确做法是定义一个 CSS 变量（比如 --gap），在子元素上用 calc() 算出实际 margin 值。
常见错误：把 --gap 设在子元素上，结果每个子元素都按自己变量算 margin，导致首尾多出多余空隙。
- 变量必须设在父容器（如
.grid或.flex）上，子元素通过继承或var(--gap)获取 - 横向布局用
margin-right: calc(var(--gap) * -1);+margin-left: var(--gap);，再配合width: calc((100% - var(--gap)) / 2);类似逻辑来均分空间 - 纵向布局更简单：子元素设
margin-top: var(--gap);，然后父容器加margin-top: calc(var(--gap) * -1);抵消第一个元素的顶部空隙
gap 属性 vs calc() + 变量：什么时候该放弃原生 gap
现代浏览器中 gap 确实够用，但它只对 display: grid 和 display: flex（仅 Firefox 111+、Chrome 127+ 支持 flex gap）生效，且无法参与其他计算（比如作为字体大小或阴影偏移的基准）。
典型踩坑：在 inline-flex 容器里写 gap: var(--gap)，结果完全不生效——因为旧版 Chrome 和 Safari 根本不认这个组合。
立即学习“前端免费学习笔记（深入）”；
- 需要跨 display 类型复用间距逻辑时（比如同一套
--gap同时驱动 padding、font-size、border-width），必须用变量 +calc() - 要兼容 Safari ≤ 16.4 或 Chrome ≤ 115，
flex gap就得降级，此时变量方案是唯一稳定选择 -
gap不能用于float、inline-block或绝对定位布局，而变量 +calc()没这个限制
响应式中修改 --gap 的安全写法
很多人在媒体查询里直接改 :root { --gap: 1rem; }，结果发现组件内部基于 --gap 计算的 height 或 transform 没同步更新——因为 CSS 自定义属性不是“实时重算”的，它只在声明处求值一次，后续变化不会触发依赖它的 calc() 重解析（除非该属性被用于可动画属性，且有过渡）。
真正可靠的响应式方式，是把断点逻辑写进组件自身的选择器里：
.card-grid {
--gap: 1rem;
}
@media (min-width: 768px) {
.card-grid {
--gap: 1.5rem;
}
}
.card-grid > * {
margin: calc(var(--gap) / 2);
}
- 不要在
:root层级做响应式--gap，容易污染全局、干扰其他组件 - 如果组件需要多个间距层级（比如紧凑/标准/宽松），建议用
--gap-sm、--gap-md、--gap-lg分开定义，而不是靠 JS 动态切一个变量 - 避免在
@keyframes里引用var(--gap)，动画中自定义变量不会插值，Chrome 会静默失败
和 JavaScript 联动时的变量同步陷阱
想用 JS 读写 --gap 很自然，但 getComputedStyle(el).getPropertyValue('--gap') 返回的是字符串（如 "1rem"），直接塞进 calc() 没问题，但若想用它做数学运算（比如 + 2），就会变成 "1rem2" 这种无效值。
另一个坑：JS 设置 el.style.setProperty('--gap', '24px') 后，如果该元素没重绘（比如只是隐藏状态），calc() 不会立刻更新，视觉上会延迟一帧。
- JS 中要做计算，先用
parseFloat()提取数值，再手动拼单位：`${parseFloat(val) + 2}px` - 需要强制重绘时，改完变量后加一句
el.offsetHeight触发 layout，但别滥用，会影响性能 - 如果 JS 频繁修改
--gap（比如拖拽调节间距），建议改用transform: translateX()模拟间距变化，比反复刷 CSS 变量更顺滑
变量名要不要加前缀、calc() 里能不能嵌套函数、不同单位混用是否安全——这些细节看着小，但线上出过真 bug。别嫌麻烦，每次改 --gap 都拿 DevTools 的 Computed 面板瞄一眼最终生效值。
