用gap代替margin解决button间距不一致问题，它专用于flex/grid子项间空隙，支持行列等距、响应式换行，现代浏览器原生支持，老浏览器需“margin回退+gap覆盖”策略。
button间距不一致？用gap代替margin
Flex容器里多个button手动加margin-right或margin-bottom，容易漏掉最后一个、响应式时错乱、兄弟元素干扰——根本不用这么干。gap是专为这类场景设计的，它只作用于flex（和grid）子项之间的空隙，不参与盒模型计算，也不影响首尾外边距。
-
gap在Flex中从Chrome 84+/Firefox 63+/Safari 14.1+原生支持，IE全系不支持（需降级方案） - 设
gap: 0.5rem后，所有相邻按钮间自动保持统一间距，无需额外类名或伪元素 - 避免用
margin：比如button + button { margin-left: 0.5rem; }在动态增删按钮时易出错，且无法处理换行后的行间距
需要兼容老浏览器？用CSS变量接管gap回退逻辑
直接写gap: var(--btn-gap, 0.5rem)没用——老浏览器遇到不认识的属性会整条声明丢弃。得用“先设margin，再用gap覆盖”的策略，配合CSS变量控制值。
- 先写兼容层：
button + button { margin-left: var(--btn-gap, 0.5rem); } - 再写现代层（会被支持
gap的浏览器覆盖）：display: flex; gap: var(--btn-gap, 0.5rem); - 变量定义放
:root里，方便全局调整：:root { --btn-gap: 0.75rem; } - 注意：Safari 14.0有
gap但不支持gap在flex中的百分比值，别传gap: 5%
按钮组换行后行间距也要统一？gap天然支持
当按钮数量多、容器变窄触发wrap时，margin方案完全失控：你没法用CSS精准选中“某一行末尾按钮”和“下一行开头按钮”之间的间隙。而gap对行与行之间同样生效，且值一致。
- 只需
flex-wrap: wrap+gap: 0.5rem，行列间距自动等距 - 不要试图用
row-gap/column-gap单独控制——它们在flex中尚未被广泛支持（目前仅Firefox部分支持row-gap），坚持用gap - 如果按钮高度不一致，
gap仍按轴线对齐，不会导致视觉错位；但margin可能让矮按钮“上浮”，加剧不齐
按钮组内嵌图标或文字长度差异大？gap不解决对齐问题
gap只管间距，不管内容对齐。按钮文字长短不一、带图标时图标尺寸不统一，会导致视觉“不整齐”，这时候光调gap没用。
- 给按钮统一
min-width或flex: 1（配合flex-wrap: nowrap）可缓解宽度抖动 - 图标用
inline-flex容器+固定width/height，避免撑开父按钮 - 文字截断用
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;，但需确保block级容器 - 真正要对齐的是基线（baseline）——
align-items: center比vertical-align更可靠，尤其在flex容器中
实际项目里最常被忽略的，是把gap当成纯视觉工具，却忘了它改变的是布局算法本身：它让按钮间距脱离文档流干扰，也意味着你不能再靠margin去微调某个特定按钮的位置——那会破坏一致性。真有例外需求，应该抽离成独立组件，而不是在通用按钮组里打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
