<p>* { margin: 0; padding: 0; } 不够用，因破坏表单控件、列表项等默认布局，忽略 box-sizing 差异，且无法覆盖 UA 隐藏样式；应配合 box-sizing: border-box 与针对性恢复。</p>
为什么 * { margin: 0; padding: 0; } 不够用
这个通配符重置看似一劳永逸，实际会破坏表单控件、列表项、表格单元格等元素的默认布局行为。比如 <input> 在 Chrome 中自带 padding 和 border，粗暴清零后宽度计算错乱；<ul></ul> 清掉 padding-left 后，项目符号（bullets）可能被裁掉或偏移。
更关键的是，它无法解决 box-sizing 差异——很多浏览器对 <button></button>、<select></select> 默认用 border-box，而 <div> 是 <code>content-box，只清 margin/padding 不统一盒模型，后续尺寸控制依然不可靠。
- 不要单独依赖
*重置，它只是起点，不是终点 - 必须配合
box-sizing: border-box全局设置 - 部分元素（如
<hr>、<fieldset></fieldset>）有隐藏的 UA 样式，通配符不覆盖它们
更稳妥的现代重置写法：从 all: unset 到渐进增强
all: unset 比通配符更彻底，它会清除所有继承和非继承属性（包括 font、color、line-height），但代价是文本完全“失重”——<h1></h1> 变成普通大小、无粗体，<a></a> 失去下划线和颜色。所以不能直接上 all: unset，得兜底。
推荐组合：* { margin: 0; padding: 0; box-sizing: border-box; } + 针对性恢复关键样式：
立即学习“前端免费学习笔记（深入）”；
- 给
body加回font-family、line-height、color - 显式设置
h1–h6的font-size和margin-block - 对
ol、ul单独设padding-inline-start: 40px（而非旧式padding-left） - 用
:where()包裹重置规则，避免提升选择器权重（例如:where(*) { margin: 0; }）
margin 和 padding 的默认值到底谁说了算
不是所有标签都有默认 margin 或 padding。比如 <span></span>、<em></em>、<strong></strong> 默认两者都是 0；而 <p></p> 有 margin-block: 1em，<blockquote></blockquote> 有 margin-inline-start: 40px。这些值由浏览器的 User Agent Stylesheet 决定，且不同引擎差异不小：
- Firefox 对
<details></details>设了margin-block: 1.5rem，Chrome 是1rem - Safari 给
<input type="search">加了padding-inline: 12px，其他浏览器没这行 -
margin的默认单位多为em或rem，受父级字体大小影响，不是固定像素
查真实默认值？打开 DevTools → Elements 面板 → 右侧 Styles 标签页，勾选 “Show all”，展开 “user agent stylesheet” 就能看到。
移动端和表单控件的坑：别让重置毁掉点击区域
在 iOS Safari 上，<input> 和 <select></select> 的最小可点击高度是 44px，这是系统级限制。如果重置时把 padding 清零又没补 min-height，用户点不中——尤其小屏设备上，手指误触率飙升。
- 对所有表单控件（
input、textarea、select、button）加min-height: 44px（iOS）或40px（Android） - 避免用
padding: 0 !important强制覆盖，改用padding: 0.5rem 0.75rem这类相对值，留出呼吸空间 -
<label></label>的margin-bottom清零后，需手动加margin-block-end: 0.5rem保证表单字段间距合理
重置不是删光一切，而是把不可控的默认值，换成你明确知道、能预测、可维护的值。最常被忽略的，其实是那些没报错、没崩、但交互变卡顿、点击变困难的“隐形退化”。
