padding: 0对button无效是因为浏览器UA样式表硬编码了padding值（如Chrome为6px 12px），优先级高于通配符重置，必须同步设置padding、border、line-height、box-sizing四属性并前置声明才能彻底覆盖。
为什么padding: 0对button无效
因为浏览器 UA 样式表对 button 的 padding 使用硬编码值（Chrome 是 6px 12px，Firefox 是 4px 8px），且这些值不继承、不响应通配符重置，优先级高于 * { padding: 0 } 或 normalize.css。你在开发者工具里看到的 computed padding，90% 来自 UA，不是你写的规则。
必须同步设置的四个 CSS 属性
单改 padding 不够，缺一不可：
-
padding：显式写死，推荐用px（如padding: 8px 16px），避开em/rem在 UA 字体链中的不稳定计算 -
border：用border: 1px solid transparent，绕过 Firefox 的inset边框撑开、IE6–7 对无色边框的占位逻辑 -
line-height：设为具体像素值（如line-height: 20px），IE6–8 需额外补line-height: normal，否则文字顶到上沿 -
box-sizing：强制box-sizing: border-box，Safari 和旧 WebView 中继承无效，必须显式声明
Flex 布局下 padding 不一致会触发 Safari 的 min-width 保护
当 button 在 Flex 容器中设了 flex: 1 0 0，而 padding 没统一，Safari 会基于 UA 的“自然宽度”（含未归零的 padding）触发 min-width: min-content，导致按钮意外撑满或溢出。修复方式不是调 flex 属性，而是：
- 先统一
padding（四属性组必须完整） - 再加
min-width: 0关掉这个保护机制 - 别用
input[type="button"]替代——它的 UA 行为和原生button不同，调试时容易误判
在哪里写、怎么验证才真正生效
这段重置规则必须放在项目基础 CSS 最开头，早于所有组件样式，且不能包裹在媒体查询或嵌套选择器里：
立即学习“前端免费学习笔记（深入）”；
button {
padding: 8px 16px;
border: 1px solid transparent;
line-height: 20px;
box-sizing: border-box;
}
/* IE6–8 兼容 */
button {
line-height: normal;
}验证时打开开发者工具的 “Computed” 面板，确认最终生效的 padding、border、line-height 值是否来自你的规则，而不是 UA 或框架；如果某一项显示 “user agent stylesheet”，说明没覆盖成功。
真正让 button 视觉一致的，从来不是单点修复，而是这四条规则锁定 + 位置前置 + 验证到位——漏掉任一环节，某个浏览器就会悄悄给你留个像素级的坑。
