必须同时声明 box-sizing: border-box、appearance: none（含 -webkit- 和 -moz- 前缀）及 padding: 0 才能彻底归零 button 内边距，因浏览器 ua 样式会基于字体度量动态计算 padding，且 appearance 触发的原生渲染优先级高于普通 css。
直接写 button { padding: 0; border: none; font: inherit; } 能解决大部分场景，但仅靠这三行在 Chrome/Firefox/Safari（尤其 iOS）中仍会残留视觉内边距、文字偏上、点击区域异常等问题——根本原因是浏览器对 button 的 UA 样式做了动态计算和原生渲染干预。
为什么 padding: 0 看似生效却还有“空隙”
多数浏览器（包括 Chrome 128+、Firefox 120+、Safari 17+）对 button 的用户代理样式中，padding 并非固定值，而是基于 font-size、line-height 和系统字体度量动态生成的。你看到的“删不干净”的内边距，其实是 UA 样式在渲染时实时注入的补偿值。
- 仅设
padding: 0不够，因为box-sizing默认是content-box，而 button 的 content 区域本身受字体撑开 -
appearance触发原生控件渲染逻辑（比如 macOS 的圆角阴影、iOS 的额外横向 padding），它自带 padding 行为，且优先级高于普通 CSS - 必须同时声明
box-sizing: border-box+appearance: none（含前缀）+padding: 0才真正归零
appearance: none 必须带全前缀才能跨浏览器生效
Chrome 和 Safari 需要 -webkit-appearance: none，Firefox 需要 -moz-appearance: none，现代标准是 appearance: none。漏掉任一前缀，对应浏览器就会回退到原生渲染，导致 padding、圆角、阴影等不可控。
- 不加
-webkit-appearance: none：Safari/iOS 下按钮仍有约 6px 横向 padding（尤其font-size 时） - 不加
-moz-appearance: none：Firefox 可能保留默认背景色和边框轮廓 - 建议写法：
-webkit-appearance: none; -moz-appearance: none; appearance: none;
文字垂直居中偏上？别碰 padding，改 line-height 或用 flex
即使 padding 归零，文字仍“浮”在顶部，是因为 button 是替换元素，其内部行盒高度由 line-height 控制，不是 padding。设 line-height: normal 依然不可控，它依赖字体度量。
- 最简方案：显式设
line-height: 1或与height相等（如height: 32px; line-height: 32px;） - 更健壮方案：用
display: flex; align-items: center; justify-content: center;，彻底绕过行盒计算 - 注意：若按钮内含图标+文字混合内容，
flex是唯一可靠方式；line-height在多行或字号变化时容易失效
iOS Safari 的额外 padding 是规范行为，不是 bug
iOS Safari 对 button 强制添加横向 padding（通常 ~6px），是为了满足 WCAG 2.1 中可点击区域 ≥ 44×44pt 的无障碍要求。这不是 bug，而是主动介入。
- 加
font-size: 16px或更大，可触发 Safari 的“标准控件尺寸”逻辑，让 padding 回归预期值 - 若需像素级控制（如设计系统组件），建议放弃原生
button，改用<div role="button"> + 手动绑定 <code>click、focus、keydown（Enter/Space）事件 - 不要试图用
-webkit-tap-highlight-color: transparent解决——它只去高亮，不影响 padding
真正麻烦的不是代码写几行，而是不同浏览器对同一属性的解释权分散在 UA 样式、appearance 渲染层、字体度量引擎三个层面；一个没对齐，就全盘失效。所以重置 button 从来不是“清掉默认值”，而是“接管整个渲染链路”。
