不同浏览器 body 默认 margin 不同是因用户代理样式表差异；推荐轻量重置：重置盒模型、块级元素外边距和替换元素显示，保留表单控件默认样式，并防御性设置 html font-size。
为什么不同浏览器的 body 默认 margin 不一样
因为各浏览器内置的用户代理样式表（user agent stylesheet）对 body、h1、p 等元素设了不同默认值。比如 Chrome 给 body 设了 8px 外边距，而 Firefox 可能略高，Safari 在某些版本里还加了字体缩放逻辑。这不是 bug，是历史兼容策略导致的视觉差异。
直接写 body { margin: 0; } 能解决一部分，但漏掉 h1、ul、form 等元素仍会继续“撑开”布局，后续调试时容易误判是自己写的样式问题。
用 * { margin: 0; padding: 0; } 安全吗
不安全。这个通配符重置看似彻底，但会破坏原生语义化组件的行为：
-
button、input会丢失默认内边距，文字贴边难点击 -
textarea的滚动条可能被压缩变形 -
details/summary展开箭头错位 - 部分屏幕阅读器依赖默认间距做语义分隔，重置后影响可访问性
更稳妥的做法是只重置真正需要归零的容器类元素，保留表单控件和内联元素的默认行为。
立即学习“前端免费学习笔记（深入）”；
推荐的轻量级基础重置写法
不用引入 Normalize.css 或 Reset.css 整包，几行关键声明就能覆盖 90% 初级项目痛点：
/* 基础重置 —— 针对布局容器 */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure {
margin-top: 0;
margin-bottom: 0;
}
ul, ol {
padding-left: 0;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}这段代码重点在三点：
- 用
box-sizing: border-box统一盒模型计算方式，避免 padding 撑宽容器 - 只清空标题、段落、列表等块级容器的上下外边距，不碰
input、button等交互元素 - 强制图片等替换元素为
display: block，消除行内元素默认的基线留白
重置后字体大小还是不一致？检查 rem 根字号是否被覆盖
很多初学者写了重置样式，但 h1 { font-size: 2rem; } 在不同设备上依然显示不同——问题常出在 html 元素的 font-size 被浏览器缩放、系统设置或更高优先级 CSS 覆盖了。
可在重置末尾加一行防御性声明：
html {
font-size: 16px;
}如果项目需响应式根字号（如移动端用 vw），必须确保该声明在所有其他样式之前加载，且不被 !important 或媒体查询外的全局规则干扰。否则 rem 就成了“不可靠单位”。
