真正该用的最小安全重置组合是：先设* { box-sizing: border-box; }及伪元素继承，再重置body行高和常见内容元素上下边距，保留列表缩进等语义间距，避免破坏表单控件与第三方库样式。
为什么 * { margin: 0; padding: 0; } 不够用
这个写法确实能清掉所有元素的默认 margin 和 padding，但会破坏表单控件、列表项、标题等元素的天然视觉节奏。比如 <input> 在 Chrome 里自带 margin 用于对齐，清掉后可能错位；<ul></ul> 失去缩进后语义结构变模糊。
更关键的是，它不碰 box-sizing —— 默认是 content-box，导致你设 width: 100px 时，加上 padding 或 border 就撑出容器，这是绝大多数布局 bug 的根源。
- 只重置
margin/padding，不改box-sizing，等于只拆了引信，没拆炸弹 - 通配符重置性能略差（尤其老浏览器），但现代项目中影响可忽略
- 它无法解决
h1~h6的默认加粗和字号差异，这些得单独处理
真正该用的最小安全重置组合
核心就两段：一段管盒模型，一段管基础间距。顺序不能错，box-sizing 必须最前，否则后续继承会失效。
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, ul, ol, dl, figure {
margin-top: 0;
margin-bottom: 1rem;
}
ul, ol {
padding-left: 2rem;
}
-
box-sizing: border-box让所有元素（含伪元素）的宽高包含padding和border，避免意外溢出 - 只重置常见流式内容元素的上下边距，保留左右内边距（如列表缩进），不碰
input、button等交互元素 -
line-height: 1.5是为了消除不同浏览器对body的默认行高差异，不是为了“美化”
哪些地方绝对不能套用通配符重置
第三方 UI 库（如 Ant Design、Element Plus）或自研组件库，通常已内置完整重置逻辑。如果你在它们的包裹容器里再执行一遍 * { margin: 0; }，大概率会把按钮内边距、卡片阴影间距全干掉，界面直接塌陷。
- 在
iframe内容、富文本编辑器（contenteditable）区域慎用，它们依赖原生样式渲染结构 - 邮件模板 CSS 中禁用通配符重置 —— Outlook 等客户端对
*支持极差，甚至会整个忽略后续规则 - 如果项目用了 CSS-in-JS（如 Emotion、Styled Components），通配符需显式注入全局样式，不能只写在某个组件文件里
遇到 margin collapse 别急着删 margin
两个相邻块级元素的垂直外边距会合并，这是 CSS 规范行为，不是 bug。很多人看到标题和段落之间空太大，第一反应是给 h2 加 margin: 0，结果下一段文字贴到标题上去了。
- 优先用
padding替代margin控制间隔（父容器加padding-top） - 触发 BFC 可阻止合并，例如给父容器加
overflow: hidden或display: flow-root - Flex/Grid 容器子项不发生 margin collapse，重构布局比硬重置更治本
事情说清了就结束。真正麻烦的从来不是怎么重置，而是重置之后，哪几个组件悄悄把 box-sizing 改回了 content-box，又在哪次 npm update 后突然多了一层 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
