根本原因是浏览器UA样式表对button的默认padding值硬编码不同：Chrome为6px 12px，Firefox为4px 8px，Safari还叠加圆角阴影占位；仅设padding:0无法覆盖，须配合box-sizing: border-box、appearance: none、border: 0等组合重置。
button内边距不一致的根本原因不是CSS没写对
Chrome、Firefox、Safari 对 button 的默认 padding 值不同，这不是你漏写了样式，而是浏览器 UA 样式表硬编码的结果：Chrome 给 6px 12px，Firefox 是 4px 8px，Safari 还可能加圆角和阴影占位。你只写 padding: 0，在旧版 Safari 或 IE 中根本压不住——因为它的内边距逻辑藏在 appearance 和渲染引擎里，不是纯 CSS 层面可覆盖的。
现代项目（放弃 IE8 及以下）最简有效重置
以下规则覆盖 Chrome/Firefox/Safari/Edge（2026 年主流版本），保留语义与可访问性：
button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font: inherit;
color: inherit;
background: transparent;
appearance: none;
}
-
appearance: none必须加，否则 Safari/Chrome 仍按原生按钮逻辑预留内边距和圆角 -
font: inherit防止因继承父级字号导致行高撑开按钮高度 -
background: transparent清除旧版 Safari 默认灰底；color: inherit避免文字被 UA 强制设为黑色 - 别用
all: unset——它会干掉cursor: pointer和 focus outline，破坏键盘操作
为什么写了 height: 40px，实际还是更高？
常见现象：明明设了固定高度，但按钮内容垂直居中偏下、或整体比预期高。根本原因是 button 是替换元素，默认按基线（baseline）对齐，会预留 descender 空间（比如字母 g、y 的下延部分）。line-height 和 vertical-align 在暗中起作用。
- 不要依赖
line-height: 1+height组合，字体实际渲染可能裁切文字 - 推荐用
display: flex; align-items: center; justify-content: center;替代纯 height 控制 - 移动端记得加
-webkit-tap-highlight-color: transparent消除点击高亮
如果必须兼容 IE8，不能只靠 box-sizing
box-sizing: border-box 在 IE6–7 完全无效，IE8 仅标准模式下部分支持，且对 button 元素尺寸计算极不稳定。你写了 width: 100px; padding: 6px; border: 1px，IE7 仍按 content-box 算总宽 = 114px。
- 必须组合使用：
padding: 0+border: 1px solid transparent（无色边框当占位符） - 显式设
line-height和height，且两者尽量相等（如都设28px） - 加
display: inline-block; zoom: 1触发 hasLayout，防边框浮动 - IE8 不支持
@supports，得用条件注释或独立 IE8 样式表回退
最容易被忽略的一点：button 的内边距差异本质是 UA 样式表的硬编码行为，不是“可覆盖的 CSS 属性”。你越依赖单一声明（比如只改 padding），在旧环境里就越不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
