button默认padding删不干净是因为浏览器用户代理样式基于字体度量动态计算；需同时设box-sizing: border-box、appearance: none（含各前缀）和padding: 0才能归零。
button默认padding为什么删不干净
直接写 padding: 0 看似合理，但多数浏览器（Chrome/Firefox/Safari）对 <button></button> 会额外注入用户代理样式（user agent stylesheet），其中包含基于字体度量的内边距计算逻辑——不是固定值，而是随 font-size、line-height 甚至系统字体渲染引擎动态调整。所以你看到的“残留padding”往往不是CSS没生效，而是被浏览器底层样式覆盖或叠加了。
必须同时重置border-box和appearance
仅设 padding: 0 不够，因为：
① box-sizing 默认是 content-box，而 button 的 content 区域本身受字体影响；
② appearance 会触发平台原生控件渲染逻辑，自带 padding 行为。
- 强制用
box-sizing: border-box，让 padding 归入尺寸控制范围 - 加
appearance: none（并补全各浏览器前缀：-webkit-appearance: none,-moz-appearance: none） - 再设
padding: 0才真正归零
button {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
}
button文字垂直居中仍偏上？那是line-height在捣鬼
即使 padding 归零，文字视觉上仍可能“浮起来”，因为 line-height 默认继承自父元素或浏览器默认值，它会影响行内内容的基线对齐位置。button 是替换元素（replaced element），其内部行盒（inline box）高度由 line-height 控制，而非 padding。
- 显式设置
line-height: 1或与 height 相等的数值（如height: 24px; line-height: 24px） - 避免用
line-height: normal，它依赖字体度量，不可控 - 若需兼容图标+文字混合内容，优先用 flex 布局替代 line-height 居中
移动端iOS Safari的button有额外内边距
iOS Safari 对 <button></button> 会悄悄加约 6px 左右的横向 padding（尤其在 font-size 时），这是为了满足可点击区域无障碍规范，但会破坏像素级布局预期。
- 加
-webkit-tap-highlight-color: transparent不能解决，只是去掉点击高亮 - 真正有效的是：给 button 设
font-size: 16px或更大（触发 Safari 的“标准控件尺寸”逻辑） - 或彻底放弃原生 button，用
<div role="button"> + 手动绑定 click/focus/keyboard 事件 <p>复杂点在于：appearance 和 tap-highlight 是解耦的，一个关了不代表另一个消失；而 iOS 的 padding 插入时机早于 CSS 解析，所以必须用 font-size 这类能提前干预渲染路径的方式。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
