各浏览器对 button 的默认 padding 不一致，Chrome 为 2px 6px，Firefox 更紧凑，Safari 可能增加垂直空间；需显式声明 padding、border、line-height，并用 appearance: none 彻底剥离原生样式以确保跨浏览器一致性。
Chrome/Firefox/Safari 对 button 的默认 padding 不一致
不同浏览器给 button 元素塞的默认内边距不一样，Chrome 通常给 padding: 2px 6px，Firefox 更“紧”一点，Safari 在某些版本里还会加额外垂直空间。这不是 bug，是各引擎对表单控件样式重置策略不同导致的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别依赖浏览器默认
padding，尤其做跨浏览器一致的 UI 组件时 - 用
* { box-sizing: border-box; }前提下，直接为button显式声明padding - 若用 CSS Reset（如 Normalize.css），确认它是否已处理
button—— Normalize 会重置但不归零，仍留有padding: 1px 6px类似值
button 的 padding 重置必须配合 border 和 line-height
只设 padding: 0 很容易让文字贴边、点击热区变小，甚至在 Safari 中触发奇怪的基线对齐偏移。这是因为 button 是替换元素（replaced element）行为，其内部行高和边框会影响实际可点击区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 重置
padding同时，至少补上border: 1px solid transparent（防边框塌陷） - 显式设置
line-height（如line-height: 1.5），避免文字上下“飘”或被截断 - 如果按钮含图标+文字，
padding建议按内容节奏分设：padding: 8px 12px比全零更安全
用 appearance: none 彻底剥离原生样式再重定义
光靠 padding 和 border 还不够——某些浏览器（特别是 Safari）会给 button 加不可见的内边距或阴影，仅靠 CSS 覆盖不干净。这时候得告诉浏览器：“别管你那套默认样式了，我来重画。”
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
appearance: none，并兼容写法：-webkit-appearance: none; -moz-appearance: none; - 加上后务必手动补
cursor: pointer，否则鼠标悬停无反馈 - 注意：IE 不支持
appearance，如需兼容 IE11，只能退回到精细微调padding+height+line-height
移动端 button 的 padding 需要额外考虑触摸热区
桌面端设 padding: 4px 8px 可能刚好，但手机上手指点不准，太小的热区会导致误操作或用户反复点击。这不是样式问题，是交互基础要求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移动端按钮最小高度建议 ≥ 44px（iOS 人机指南），对应
padding至少预留上下各 12–16px - 用
min-height+padding组合，比只靠padding更可控 - 避免在
@media里只改font-size却忘了同步调大padding，文字变大但热区没跟上，体验就断层了
最常被忽略的是：重置 padding 后，button 的垂直居中逻辑会从“基于内容盒”变成“基于 border-box”，如果父容器用 flex 或 vertical-align 对齐，很可能突然错位——这时得检查 align-items 或补 margin 微调。
