CSS通用重置margin和padding方法

CSS中看似便捷的通用选择器`* { margin: 0; padding: 0; }`重置边距，实则因优先级过低、无法覆盖浏览器高权重的用户代理样式（如表单控件、标题、列表等），且忽略`box-sizing`不一致带来的布局隐患，常常失效甚至引发意外错位；真正稳健的做法是显式清零`html`和`body`，再结合`*, *::before, *::after`统一归零边距并强制`border-box`，同时清醒认知重置的边界——段落间距、表格内边距、Flex Gap等需针对性处理，而非“一清了之”；对于追求跨浏览器一致性与可维护性的项目，直接采用轻量可靠的`normalize.css`替代手写重置，既能保留语义化排版合理性，又能精准修正差异，省时避坑。

为什么*重置边距经常失效

直接写 * { margin: 0; padding: 0; } 看似简单，但实际常被浏览器默认样式、CSS优先级或继承行为绕过。比如 button、input、h1 这些元素自带强默认 margin/padding，且部分浏览器（如 Chrome 对表单控件）会用 user agent stylesheet 高权重要求覆盖，* 的权重不够，压不住。

• 通用选择器 * 优先级极低（0,0,0,0），遇到任何类名、标签名或属性选择器都会被覆盖
• *:not(html) 这类写法看似聪明，但不解决根本问题，反而增加不可预测性
• 某些重置场景下，box-sizing 不统一也会让“看起来没边距”变成“实际占位不对”

真正有效的基础重置写法

不用*，改用更精准、更高权的组合：把 html 和 body 单独拎出来设为零，再配合 *, *::before, *::after 统一 box-sizing，这是现代重置最稳的起点。

html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• html 和 body 必须显式清空，否则 body 默认 8px margin 会撑开整个页面
• 加上 *::before, *::after 是为了确保伪元素也不带边距，避免某些 CSS 框架或自定义图标（如 Font Awesome）意外溢出
• box-sizing: border-box 虽然不属边距范畴，但和边距感知强相关——没它，padding 会撑大 width，导致布局错乱

哪些地方不能只靠重置，得手动补

重置不是万能胶。有些边距来自语义行为或渲染规则，删了反而破坏可访问性或结构逻辑。

• p、h1–h6、ul、ol 的上下间距是排版必需，全清会导致段落粘连；应单独用 margin-block-start/end 控制
• fieldset 在部分浏览器中 margin 不响应 * 重置，需单独声明 fieldset { margin: 0; }
• 表格单元格（td, th）的 padding 默认不为零，且 border-collapse: collapse 才能真正消除间隙，光清 padding 不够
• Flex/Grid 容器子项的 gap 不受 margin/padding 重置影响，别误以为“清了边距 gap 就没了”

用 Normalize.css 替代手写重置的时机

如果你项目需要跨浏览器一致、又不想漏掉 details、summary、mark 这些冷门但有默认边距的元素，手写重置很快失控。这时候直接引入 normalize.css 更省事。

• normalize.css 不暴力归零，而是保留合理默认值（如列表项缩进、标题间距），只修正浏览器差异
• 它对 button、input[type="search"] 等难搞元素做了针对性处理，比 * 可靠得多
• 体积小（压缩后约 2KB），CDN 直引即可：https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

真要快速起步，先上 normalize.css，再局部覆盖（比如清 body margin），比硬刚 * 少踩三天坑。

到这里，我们也就讲完了《CSS通用重置margin和padding方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！