CSS清除默认边距：重置margin和padding为0

清除浏览器默认边距远不止给 body 设 margin: 0 和 padding: 0 那么简单——h1、ul、form 等元素各自携带的隐式间距会让页面充满“意外留白”，而忽略 box-sizing: border-box 更会导致宽度计算失真、调试陷入误区；盲目使用通配符重置虽快，却会破坏 blockquote 缩进、sub/sup 偏移等有意义的语义样式，真正稳健的做法是结合 normalize.css（保留合理默认、修正跨浏览器差异）并针对性清空关键容器，同时不忘 viewport 设置防 iOS “假边距”、警惕表单控件因重置引发的贴边或箭头错位——这看似基础的一步，实则是横跨盒模型、语义继承与多端适配的精密平衡。

为什么直接设 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 元标签，导致页面以桌面宽度渲染后被缩放，两侧露出“背景色”——看起来像边距。

实操建议：

• 务必在 加：
• 这个标签不解决 CSS 边距，但能避免“假边距”干扰判断
• 真遇到 iOS 上 input 或 textarea 内边距异常，可能是 -webkit-appearance: none; 缺失导致的系统样式残留

去掉浏览器默认边距这事，表面只是几行 CSS，实际要同时盯住盒模型、语义继承、设备适配三层。最容易忽略的是：清完之后，button 文字突然贴边、select 下拉箭头错位、或者打印样式彻底崩掉——这些都不是 bug，是重置的代价。

好了，本文到此结束，带大家了解了《CSS清除默认边距：重置margin和padding为0》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！