用 gap 属性替代 margin 是解决按钮排列不均的最佳方案——它专用于 Flex/Grid 布局，统一控制子元素间距且不干扰盒模型；需确保父容器为 flex 或 grid，移除按钮自身 margin，并注意 Safari 14.1+ 才完全支持。
按钮排列不均匀，通常是因为用了 margin 手动调间距，容易错位、响应式失效，或父子容器尺寸计算混乱。用 gap 属性是最干净的解法——它专为 Flex 和 Grid 容器设计，能统一控制子元素间的水平与垂直间距，且不干扰单个按钮的盒模型。
确保父容器是 Flex 或 Grid 布局
gap 只在 display: flex 或 display: grid 的容器上生效，普通 block 或 inline-block 无效。
- Flex 示例：给按钮组加 display: flex，再设 gap: 12px
- Grid 示例：适合多行按钮（如工具栏），用 display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))))，再配 gap: 8px 16px（竖向 8px，横向 16px）
- 别忘了移除按钮自身的 margin —— gap 会自动处理间隔，留 margin 反而叠加导致过宽
gap 支持单值、双值和单位灵活组合
写法简单但细节关键：
- gap: 12px → 水平与垂直间距都是 12px
- gap: 8px 16px → 垂直 8px，水平 16px（顺序是 row-gap column-gap）
- 支持 rem、em、%（Grid 中 % 相对网格容器宽度）、甚至 calc()，比如 gap: calc(1rem + 4px)
兼容性注意：Flex gap 在 Safari 14.1+ 才完全支持
如果需兼容老 Safari（如 iOS 14 以下）或 IE，可降级处理：
立即学习“前端免费学习笔记（深入）”；
- 用 @supports (gap: 0) 包裹 gap 样式，安全启用
- 降级方案：保留 margin（如 :not(:last-child) { margin-right: 12px; }），再用 gap 覆盖现代浏览器
- 避免混用 gap 和 margin，否则间距会叠加，视觉更不均
基本上就这些。用 gap 替代手调 margin，布局立刻整齐可控，响应式也更稳。
