用 CSS 变量 --btn-group-gap 统一控制按钮组间距，设于父容器（如 .btn-group）并配合 display: flex 和 gap 属性，兼顾响应式、RTL 和兼容性，避免硬编码 margin。
按钮组边距不一致？用 CSS 变量统一 --btn-group-gap
按钮组里每个 button 之间空隙忽大忽小，改一个要动七八处 —— 根本不用硬编码 margin-right 或 gap。直接定义一个 CSS 变量，全局可控。
常见错误是给每个按钮单独加 margin-right: 8px，结果末尾多出空白、响应式时错位、RTL（从右向左）布局下反向失效。
- 把变量声明在
:root或组件容器上，比如.btn-group { --btn-group-gap: 8px; } - 子项用
gap（Flex/Grid 容器）或margin-inline-end（兼容老浏览器）控制间距 - 避免用
margin-right+:last-child清除，它在动态增删按钮时容易漏掉逻辑 - 如果父容器是
display: flex，优先用gap：它天然跳过首尾、支持动画、RTL 自动翻转
Flex 布局下 gap 不生效？检查父元素是否真为 Flex 容器
gap 只对 display: flex 和 display: grid 生效，写在按钮本身或普通 div 上完全没用。很多人调了半天发现“变量设了但没反应”，其实是忘了给按钮组加 display: flex。
- 确认父容器样式含
display: flex（不是inline-flex也行，但得是 flex） - 不要在按钮上写
gap—— 它是容器属性，不是子项属性 - IE 不支持
gap，若需兼容，fallback 方案用margin-inline-end+:not(:last-child) - 用 DevTools 检查 computed 样式里有没有
gap值，没有就说明容器没触发 flex/grid 上下文
响应式按钮组怎么换间距？用媒体查询重设 CSS 变量
移动端按钮要更紧凑，桌面端留白多些 —— 别写两套 margin 规则，直接在媒体查询里改变量值，所有依赖它的 gap 或计算值自动响应。
- 在
:root设默认值：--btn-group-gap: 12px; - 在
@media (max-width: 768px)里覆盖：:root { --btn-group-gap: 6px; } - 如果按钮组是独立组件，也可以在组件类上设变量：
.btn-group-mobile { --btn-group-gap: 4px; } - 注意：CSS 变量继承，所以设在父级比每个按钮上重复声明更可靠
为什么不用 calc() 直接算边距？变量组合更灵活
有人图省事写 margin-inline-end: calc(var(--btn-group-gap) * 0.5)，看似聪明，实则埋雷：一旦变量是 em 或 rem，calc() 里混合单位会报错；而且无法被 JS 动态读取修改。
- CSS 变量可被 JS 读写：
getComputedStyle(document.documentElement).getPropertyValue('--btn-group-gap') - 多个间距场景（如紧凑/标准/宽松）可共用一个变量名，只换值，不用改结构
- 如果真要缩放，用
scale或transform更稳妥，别在margin计算里掺单位运算 - 工具链（如 PostCSS）能自动提取变量做设计系统 token，硬写
calc就断了这层联系
最易忽略的是变量作用域和继承链 —— 设在 :root 看似一劳永逸，但组件隔离时可能被外层变量污染；设得太深又难维护。实际项目里，按「组件级变量 > 布局级变量 > 全局变量」分层定义，比一股脑堆在根上靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
