CSS样式重置reset基础_消除浏览器的默认内边距-css教程-PHP中文网

不同浏览器默认 margin 和 padding 不同，因 user agent stylesheet 差异；需用 reset 或 normalize 统一，配合 box-sizing: border-box 和克制的字体设置以保障兼容性与可访问性。

css样式重置reset基础_消除浏览器的默认内边距

因为每个浏览器自带的样式表（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: 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，需要额外覆盖

要，但方式得克制。直接 html { font-size: 16px; line-height: 1.5; } 看似干净，实则埋雷：它会覆盖用户系统级字体缩放设置，损害可访问性；而且 line-height: 1.5 对中文段落偏挤，对英文又可能过松。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

更稳妥的做法是保留浏览器默认字号（通常就是 16px），只归一化行高单位，并允许继承。

如果你要的是“彻底归零、自己从头定义一切”，用 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）