不同浏览器默认 margin 和 padding 不同，因 user agent stylesheet 差异；需用 reset 或 normalize 统一，配合 box-sizing: border-box 和克制的字体设置以保障兼容性与可访问性。
为什么 margin 和 padding 在不同浏览器里看起来不一样
因为每个浏览器自带的样式表（user agent stylesheet）对 body、h1、p 等元素都预设了默认的 margin 和 padding，比如 Chrome 给 body 加了 8px 外边距，而 IE 可能是 0 或别的值。
这不是 bug，是历史遗留——早期 HTML 不强调结构语义，浏览器靠“猜”来渲染排版。现在要统一视觉表现，就得主动清掉这些隐式干扰。
- 别只清
body：常见错误是只写body { margin: 0; }，但h1、ul、form同样有默认外边距 - 别用通配符暴力重置：
* { margin: 0; padding: 0; }会干掉button内部默认间距、input的内边距，导致点击区域变小或文字贴边 - 现代项目建议用
all: unset;配合选择器控制范围，但注意 IE 不支持，all在部分旧版 Safari 中行为不一致
box-sizing: border-box 必须和 reset 一起用吗
不是“必须”，但几乎等于“事实必须”。默认的 box-sizing: content-box 让 width/height 只算内容区，加上 padding 和 border 就会撑大元素——这在做栅格、卡片、表单控件时极易破布局。
reset 的目标是让开发者从同一张白纸出发，而 box-sizing: border-box 是这张纸的“坐标系设定”。漏掉它，等于 reset 了一半。
立即学习“前端免费学习笔记（深入）”；
- 全局设置推荐写法：
* { box-sizing: border-box; }或更安全的*, *::before, *::after { box-sizing: border-box; } - 不要只给容器加：
.card { box-sizing: border-box; }没用，子元素如.card__title还是 content-box，计算依然错位 - 某些第三方组件（比如旧版 Bootstrap 3 的
input）内部强设了box-sizing: content-box，需要额外覆盖
要不要重置 font-size 和 line-height
要，但方式得克制。直接 html { font-size: 16px; line-height: 1.5; } 看似干净，实则埋雷：它会覆盖用户系统级字体缩放设置，损害可访问性；而且 line-height: 1.5 对中文段落偏挤，对英文又可能过松。
更稳妥的做法是保留浏览器默认字号（通常就是 16px），只归一化行高单位，并允许继承。
- 推荐写法：
html { line-height: 1.15; }—— 这是 WHATWG 推荐的最小可读行高，兼容性好，且不会破坏用户缩放 - 避免写死像素值：
font-size: 14px会让响应式断点失效，也违背相对单位原则 - 如果项目需强制字号（如设计稿严格按 14px 基准），改用
html { font-size: 87.5%; }（即 14/16），再配合 rem 使用
reset.css 和 normalize.css 到底该选哪个
如果你要的是“彻底归零、自己从头定义一切”，用 reset；如果你希望保留有用的默认行为（比如 audio 有播放控件、sub 标签正确下标、表单元素有合理 focus 样式），用 normalize。
多数新项目其实更适合 normalize —— 它不是“重置”，而是“标准化”，修正浏览器差异的同时不牺牲可用性。
- reset.css 典型问题：清掉
button默认cursor: pointer，结果点击无反馈；清掉textarea的resize，导致无法拖拽调整大小 - normalize.css 会保留
button:focus的 outline，但统一它的颜色和粗细；也会让table边框在各浏览器中都 collapse - 不必二选一：可以先引入 normalize.css，再用几行自定义 CSS 覆盖你真正在意的项（比如清掉所有
h1–h6的 margin）
最常被忽略的一点：无论选哪个，都要检查它是否包含对 :focus-visible 的处理——现代键盘导航依赖这个伪类，老版 reset 会把它一并干掉。
