button 默认 margin 在 Chrome/Firefox/Edge 中表现不一致，因各浏览器用户代理样式表定义不同；需用 button { margin: 0 } 等方式重置，并配合 -moz-appearance: none、vertical-align 和 padding 等属性统一渲染。
button 默认 margin 在 Chrome/Firefox/Edge 中表现不一致
直接写 <button>点击</button>，在 Chrome 里上下可能有 2px 外边距，Firefox 里默认是 0，Edge 又可能带 1px 垂直偏移——这不是 bug，是各浏览器用户代理样式表对 button 的 margin 定义不同。你用 body { margin: 0 } 完全无效，因为问题出在 button 自身，不是父容器。
重置 button margin 的三种可靠写法
别用通配符 * 一刀切，容易误伤伪元素或 SVG 内嵌内容。优先锁定目标元素：
-
button { margin: 0; }最简明，覆盖所有button元素，但需确保它在 CSS 加载顺序中靠后（避免被其他规则覆盖） -
button, input[type="button"], input[type="submit"], input[type="reset"] { margin: 0; }更全面，覆盖所有常见按钮形态，尤其防止input类型按钮漏掉 - 若项目已引入
normalize.css，它默认已处理button的 margin，但检查其源码会发现：Chrome 下仍可能残留vertical-align: middle导致视觉偏移，此时需额外加vertical-align: top;
Firefox 下 button 仍有“看不见的边距”？可能是 -moz-appearance
Firefox 对原生 button 启用系统主题渲染，-moz-appearance: button; 会强制保留部分布局行为，导致即使设了 margin: 0，实际渲染仍像带 padding 或 baseline 对齐偏差。解决方法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 显式声明
-moz-appearance: none;，解除系统级样式绑定 - 紧跟着补一句
padding: 0;和line-height: 1;，否则 Firefox 可能用 font metrics 推算出意外行高 - 注意：加了
-moz-appearance: none;后，必须手动定义border和background，否则按钮变透明不可见
为什么 box-sizing: border-box 不解决 button 外边距问题
box-sizing: border-box 只影响宽高的计算方式，和 margin 完全无关。很多人误以为加了它就能“统一控制”，结果发现按钮依然错位。真正要动的是 margin、vertical-align 和 -moz-appearance 这三个属性。另外，如果按钮放在 inline 环境里（比如文字流中），它的默认 vertical-align: baseline 会和周围文字产生间隙，这时单设 margin: 0 不够，必须配合 vertical-align: top 或 middle 才能对齐。
立即学习“前端免费学习笔记（深入）”；
