button默认padding约6px、border约2px（Chrome/Edge），Firefox更厚且带阴影；需重置box-sizing、padding、border、font、appearance等属性并保留可访问性。
button 默认的 padding 和 border 是多少？
不同浏览器对 button 的默认样式处理不一致：Chrome 和 Edge 会给 button 加上约 6px 内边距和 2px 边框，Firefox 则可能更厚、还带阴影。这不是“bug”，而是 UA 样式表（user agent stylesheet）的正常行为，但会干扰你精确控制尺寸。
直接写 padding: 0; border: none; 不够——因为 button 还受 line-height、font-family、vertical-align 影响，导致高度计算不可控。
- 必须重置
box-sizing为border-box，否则width: 100%时加上border或padding会溢出 -
appearance: none要加，否则 Safari/Chrome 仍保留原生按钮的圆角、阴影和内边距逻辑 - 显式设置
font相关属性（如font: inherit），避免继承父级字体后因字号变化拉高按钮
最简可用的 button 重置规则
以下规则覆盖主流浏览器，且不会破坏可访问性（保留 focus 状态、语义和键盘操作）：
button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font: inherit;
color: inherit;
background: transparent;
appearance: none;
}
注意：background: transparent 是为了清除某些浏览器（如旧版 Safari）的默认背景色；color: inherit 防止文字颜色被 UA 强制设为黑色而无法响应父级文本色。
立即学习“前端免费学习笔记（深入）”；
- 不要用
all: unset——它会移除cursor: pointer和 focus outline，影响交互反馈 - 如果需要保留原生 focus 样式但去掉默认蓝框，用
outline: none+ 自定义:focus-visible更安全 - 移动端需额外加
-webkit-tap-highlight-color: transparent消除点击高亮
为什么 reset 后按钮高度还是不对？
常见现象：明明写了 height: 40px，实际渲染却更高。根本原因是 line-height 和 vertical-align 在起作用——button 是替换元素（replaced element），其内部行盒（inline box）默认按基线对齐，会预留下降空间（descender space）。
- 解决方法一：加
line-height: 1并配合height，但要注意字体实际渲染可能裁切 - 解决方法二（推荐）：用
display: flex; align-items: center; justify-content: center;替代纯 height 控制，更稳定 - 若内容含图标+文字，还需确保图标使用
vertical-align: middle或统一转为 inline-flex 容器
要不要全局重置所有 button？
不建议在全局 CSS 中无差别重置 button。很多 UI 框架（如 Bootstrap、Ant Design）或组件库依赖部分默认样式做基础适配；盲目重置会导致按钮在表单中与其他元素（如 input[type="text"]）高度不一致，反而增加调试成本。
- 更稳妥的做法是定义一个类名（如
.btn-reset），只在真正需要“白板级控制”的场景显式应用 - 如果项目用 CSS-in-JS 或原子化方案（如 Tailwind），优先用 utility class 组合，而非覆盖 UA 样式
- 记住：重置是为了可控，不是为了“看起来干净”——可访问性、语义、键盘导航这些隐性行为，比像素对齐更重要
最易被忽略的一点：重置后务必手动测试空格键、Enter 键触发，以及屏幕阅读器是否仍能正确 announce “button”。样式清掉了，语义不能丢。
