应将 --btn-group-gap 变量设在按钮组容器上，因其需被 gap 属性读取且依赖继承；设在 :root 易受污染，设在 button 上无效；gap 仅对 flex/grid 容器生效，须配合 display 使用，并分层提供 margin fallback。
直接用 --btn-group-gap 变量控制 gap，比硬写数值或拼 margin 更可靠、更易维护，且天然适配 RTL 和响应式。
为什么必须把变量设在父容器上
CSS 变量靠继承生效，--btn-group-gap 设在 :root 看似省事，但组件隔离时容易被外层样式污染；设在按钮本身又无法被 gap 读取（gap 是容器属性）。实际项目中应按需分层：
- 全局基础值（如默认间距）：设在
:root { --btn-group-gap: 0.75rem; } - 组件级覆盖（如弹窗内按钮要更紧凑）：设在
.modal .btn-group { --btn-group-gap: 0.5rem; } - 避免设在单个
button上——它不参与gap计算
gap 不生效？先确认 display 和作用域
很多人写了 --btn-group-gap: 8px 却没反应，根本原因是 gap 只对 display: flex 或 display: grid 容器生效，且必须写在容器上：
- 检查父元素是否真有
display: flex（不是inline-flex也行，但不能是block或漏写） - 别把
gap: var(--btn-group-gap)写在button标签上——浏览器直接忽略 - 用 DevTools 查看 computed styles，确认
gap值是否出现在容器的最终计算结果里
兼容老浏览器的 fallback 要分层写，不能只靠 var()
gap: var(--btn-group-gap) 在 IE 或 Safari 14.0 以下会整条声明失效，因为不认识 gap。正确 fallback 是“先给 margin，再用 gap 覆盖”：
- 先写兼容层：
.btn-group > button:not(:first-child) { margin-inline-start: var(--btn-group-gap, 0.75rem); } - 再写现代层：
.btn-group { display: flex; gap: var(--btn-group-gap, 0.75rem); } - 注意顺序：现代层必须在兼容层之后，否则会被覆盖
- 别用
calc(var(--x) * 0.5)混合单位——CSS 变量值是em或%时会报错
响应式换间距别写两套 margin，改变量就行
移动端按钮要更紧凑，桌面端留白多些，不需要为每个断点重复写 margin 规则：
- 在媒体查询里重设变量：
@media (max-width: 600px) { .btn-group { --btn-group-gap: 0.375rem; } } - 所有依赖该变量的
gap、margin或 JS 读取值自动响应 - 如果按钮组是独立封装组件，直接加类切换：
<div class="btn-group btn-group--compact">...</div>，并在 CSS 中定义.btn-group--compact { --btn-group-gap: 4px; }
最常被忽略的是变量作用域和继承链——设得太浅（如 :root）会被外层样式穿透，设得太深（如每个按钮上）又失去统一控制力。真正稳定的方案是：组件容器上声明变量，配合明确的 display + gap 组合，其他地方只读不写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
