CSS重置基础：消除默认内边距方法

不同浏览器因用户代理样式表（user agent stylesheet）差异，对元素如body、h1、p等设置了不一致的默认margin和padding，导致布局不可控；文章深入剖析了CSS重置（reset）与标准化（normalize）的本质区别与适用场景，强调真正有效的重置不是简单粗暴地用* { margin: 0; padding: 0; }，而是需协同box-sizing: border-box全局设置、克制的字体处理（如保留可访问性友好的相对行高）、以及对:focus-visible等现代交互特性的兼容保障——帮你从“看似清零”走向“真正可控”，让每一行CSS都经得起跨浏览器、跨设备与无障碍考验。

为什么 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 会把它一并干掉。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS重置基础：消除默认内边距方法》文章吧，也可关注golang学习网公众号了解相关技术文章。