按钮默认 margin 在 Safari 和 Firefox 中不一致：Safari 常设 margin: 0.5em，Firefox/Chrome 多为 0；需显式重置 button { margin: 0; vertical-align: middle; line-height: normal; }，并优先用 flex/grid 的 gap 控制间距。
button 默认 margin 在 Safari 和 Firefox 行为不一致
HTML <button> 元素在不同浏览器中自带的默认 margin 值不同：Safari（尤其是旧版）常给 <button> 加 margin: 0.5em，而 Firefox 和 Chrome 多数情况下是 margin: 0。这不是 bug，而是各引擎对表单控件 UA 样式的实现差异。
实际表现就是：并排多个 <button> 时，在 Safari 里自动拉开距离，其他浏览器却紧贴在一起，布局错位。
- 检查方法：用开发者工具选中按钮，看
Computed面板里的margin值是否为非零且不一致 - 不要只靠
* { margin: 0; }—— 它无法覆盖 UA 样式中带!important的部分（如某些 Safari 版本） - 最稳妥做法是显式重置
<button>的margin，而非依赖通配符
Reset.css 中 button 的 margin 重置经常被忽略
主流 Reset（如 Normalize.css、Eric Meyer Reset）对 <button> 的处理并不统一。Normalize.css 默认保留部分 UA margin，仅修正跨浏览器的 inconsistency；而经典 Meyer Reset 会重置 button，但只写 margin: 0;，没覆盖 vertical-align 或 line-height 引发的基线对齐问题——这会导致按钮和旁边文字/图标视觉错位，看似“间距异常”，实则是垂直对齐惹的祸。
- 推荐补全重置：
button { margin: 0; vertical-align: middle; line-height: normal; } - 如果项目用了 Normalize.css，需额外加
button { margin: 0; }覆盖其默认行为 - 避免用
display: inline-block后不设vertical-align—— 这会让按钮按基线对齐，和文字底部留出空隙，误以为是“间距”
Flex/Grid 布局下 button 间距失效？别只靠 margin
当把 <button> 放进 display: flex 容器时，很多人仍习惯用 margin-right 控制间距，结果在 Safari 中因 margin 折叠或 flex item 对齐策略不同导致间隙不均。更稳定的方式是放弃元素级 margin，改用容器级间隙控制。
立即学习“前端免费学习笔记（深入）”；
- Flex 场景：用
gap替代margin，gap: 8px在所有现代浏览器（含 Safari 14.1+）都可靠 - Grid 场景同理，
grid-gap或gap是首选 - 若需兼容老 Safari（margin-inline-end +
:last-child { margin: 0; }，比margin-right更语义且规避方向问题
按钮内边距（padding）和字体继承引发的“假间距”
有时所谓“按钮间距异常”，其实是 padding 不一致或字体未显式声明导致的渲染差异。比如按钮内文本使用了系统默认字体（San Francisco / Helvetica Neue / Segoe UI），而这些字体在不同系统下字高（line-height、ascent）不同，造成按钮实际高度浮动，相邻元素看起来像有额外间距。
- 固定按钮高度：显式设置
height或min-height，配合box-sizing: border-box - 统一字体栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - 慎用
em单位的padding—— 它随父级 font-size 缩放，容易在嵌套结构中放大误差
真正难调试的不是 margin 本身，而是它和 vertical-align、line-height、字体度量、flex/gap 兼容性层层叠加后的综合表现。每次看到按钮“间距不对”，先开 DevTools 看 computed margin 和 baseline 位置，比直接加 reset 更快定位根源。
