浏览器通过用户代理样式为 button 默认设置 margin: 0.5em 和 padding: 1px 6px，并非继承自 body；chrome、firefox、safari 均如此，旧版 ie 还额外带 border: 2px outset。
button 默认 margin 和 padding 在哪来？
浏览器对 button 元素有独立的用户代理样式（user agent stylesheet），不是从 body 继承来的。Chrome、Firefox、Safari 均默认给 button 设置了 margin: 0.5em;（约 8px）和 padding: 1px 6px;，部分旧版 IE 还带 border: 2px outset;。这些值会干扰按钮在行内布局、栅格对齐或全屏控件中的位置。
常见错误现象包括：
- 多个
button横排时出现意外间隙 - 按钮紧贴父容器边缘却仍有空白
- 用
display: flex排列时基线错位（因默认 vertical-align）
只清 button，不波及其他元素的写法
最稳妥的做法是**精准重置**，避免用 * 或全局 reset 影响语义化结构：
推荐 CSS 规则：
button {
margin: 0;
padding: 0;
border: none;
background: transparent;
font: inherit;
line-height: normal;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
}
关键点说明：
-
margin: 0和padding: 0直接覆盖默认值，不依赖继承 -
border: none必须显式声明——某些浏览器（如 Safari）的button默认有border: 1px solid -
background: transparent防止部分安卓 WebView 渲染出不可见底色，导致点击反馈异常 -
font: inherit确保字体大小/粗细与父容器一致，否则可能突然变小或加粗 - 去掉
line-height: normal是为了防止 Firefox 下按钮文字垂直偏移
为什么不能只写 button { margin: 0; }？
单写 margin: 0 看似够用，但实际会暴露三个隐藏问题：
典型失效场景：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在
flex容器中，button仍因默认align-items: stretch和内部line-height导致高度不一致 - 移动端 Safari 对
button有额外padding: 1px 12px（iOS 16+），仅设margin: 0不生效 - 若按钮含图标（如
<svg></svg>），默认vertical-align: baseline会造成底部留白，需额外加vertical-align: middle
所以最小完备集至少包含：margin、padding、border、font、line-height。
兼容性与性能注意点
这条规则在所有现代浏览器（Chrome 100+、Firefox 115+、Safari 16.4+、Edge 114+）中表现一致，无需前缀或 hack。
但要注意：
- 不要在 reset.css 中把
button和input[type="button"]合并写成button, input[type="button"]—— 后者在部分 Safari 版本中会漏掉padding重置 - 如果项目用了 Tailwind 或 Bootstrap，优先用其工具类（如
!m-0 !p-0 !border-0），因为它们带!important，能覆盖框架内置样式 - 重置后必须手动加交互状态，比如
button:hover { background-color: #f0f0f0; }，否则按钮将完全“隐形”于视觉反馈
button 本身，而是它嵌套在 form 或被第三方 UI 库包裹后，外层样式通过 all: unset 或 appearance: none 干扰了重置逻辑——这时候得打开开发者工具，逐层看 computed 样式里哪一行 margin/padding 是最终生效的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
