CSS清除默认边距的实用技巧

清除浏览器默认边距远不止简单设置 `body { margin: 0; padding: 0; }`，因为各元素（如 h1、ul、form、table 等）拥有独立且不一致的默认 margin 和 padding，仅重置 body 会导致页面充斥“意外留白”；真正有效的方案需结合 `box-sizing: border-box` 防止盒模型偏差，并根据项目需求选择精准重置关键元素、使用 normalize.css 保留语义化样式，或采用 reset.css 实现完全控制——同时不可忽视 viewport 设置对移动端“假边距”的影响，以及重置后表单控件、打印样式等潜在副作用，这是一场兼顾兼容性、可维护性与设计意图的精细平衡。

为什么直接设 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清除默认边距的实用技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！