直接设 body { margin: 0; padding: 0; } 不够用，因浏览器对 h1、ul、form 等元素有独立默认边距；需配合 box-sizing: border-box 并重置关键元素或选用 normalize.css。
为什么直接设 body { margin: 0; padding: 0; } 不够用
浏览器对不同元素有各自默认的 margin 和 padding，比如 h1 顶部有大外边距、ul 左侧有内边距、form 和 fieldset 也有隐式间距。只清空 body，页面里依然会冒出各种“意外留白”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
* { margin: 0; padding: 0; box-sizing: border-box; }—— 简单粗暴，覆盖所有元素 - 但注意：这会影响
button、input等表单控件的默认排版，可能让它们显得过紧或文字贴边 - 更稳妥的做法是重置常见块级容器：
body, h1, h2, h3, h4, p, ul, ol, dl, pre, form, fieldset, figure
box-sizing: border-box 必须一起加的原因
只清边距不改盒模型，后续写 width: 100px; padding: 10px; 时，实际宽度会变成 120px，和预期不符，调试时容易误判是边距没清干净。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: border-box应该和重置样式绑定使用，写在通配符或基础重置块里 - 需要兼容老 IE（
IE8-）时，得加-moz-box-sizing和-webkit-box-sizing前缀（虽然现在基本不用了） - 别漏掉
table元素——它默认是box-sizing: content-box，且某些浏览器下*不生效
现代项目该用 reset.css 还是 normalize.css
直接写 * { margin: 0; padding: 0; } 是最简方案，但会抹掉所有语义化默认样式，比如 blockquote 的缩进、hr 的线条、sub/sup 的垂直偏移——这些其实是有意义的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 新项目推荐用
normalize.css：它保留合理默认样式，只修正浏览器间差异（如audio在 Firefox 和 Chrome 的高度不一致） - 如果追求极致控制（比如 UI 库、后台系统），再上
reset.css或自己精简的重置规则 - 注意
normalize.css不处理margin/padding归零，仍需额外清空body或关键容器
移动端 viewport 和默认边距的关系
很多新手发现 iOS Safari 下 body 左右有空白，不是 CSS 边距问题，而是没设 viewport 元标签，导致页面以桌面宽度渲染后被缩放，两侧露出“背景色”——看起来像边距。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 务必在
<head>加：<meta name="viewport" content="width=device-width, initial-scale=1"> - 这个标签不解决 CSS 边距，但能避免“假边距”干扰判断
- 真遇到 iOS 上
input或textarea内边距异常，可能是-webkit-appearance: none;缺失导致的系统样式残留
去掉浏览器默认边距这事，表面只是几行 CSS，实际要同时盯住盒模型、语义继承、设备适配三层。最容易忽略的是：清完之后，button 文字突然贴边、select 下拉箭头错位、或者打印样式彻底崩掉——这些都不是 bug，是重置的代价。
