<p>* { margin: 0; padding: 0; } 是错误起点，它抹除浏览器默认语义布局导致 input 紧贴边框、标题堆叠、列表错位等问题，即便加 box-sizing: border-box 也无法恢复语义结构，应改用渐进式重置如 body 和 heading 的针对性 margin-block 控制。</p>
直接写 * { margin: 0; padding: 0; } 是错的起点，不是解决方案。 它确实能“清掉”边距，但代价是让 input、button、h1、ul 等元素失去原生排版逻辑，后续反而要一行行手动加回，得不偿失。
为什么 * { margin: 0; padding: 0; } 会让页面“塌”了
这不是 CSS 失效，是你主动抹掉了浏览器对关键元素的默认布局意图：
-
input和textarea清掉padding后，文字紧贴边框，可访问性下降 -
h1～h6失去margin-block，标题堆叠难读 -
ul、ol的padding-inline-start（原padding-left）消失，项目符号错位或被裁切 -
fieldset在 Firefox 中有 2pxmargin，但通配符无法稳定覆盖它 -
li::marker的缩进也被清零，列表视觉结构直接坍塌
如果非要用通配符，至少配这三行
单独写 * { margin: 0; padding: 0; } 是半残废重置。真正起效的最小组合是：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}原因很实在：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: border-box解决宽高计算不一致问题（比如width: 100%+padding溢出） - 不加
::before/::after版本，伪元素仍用content-box，可能影响图标、装饰线等定位 - 但这依然不解决语义丢失问题，只是让“清零后还能勉强算尺寸”
哪些地方绝对不能套用 * 重置
通配符在这些场景下不是省事，是埋雷：
- 第三方 UI 库容器内（如
.ant-design或.el-container），会把按钮内边距、卡片阴影间距全干掉 -
iframe内容或contenteditable富文本区域，它们依赖 UA 样式渲染基础结构 - 邮件模板（Outlook 等客户端对
*支持极差，整段规则可能被忽略） - CSS-in-JS 项目（如 Emotion），
*必须显式注入全局样式，写在组件文件里完全无效
更靠谱的替代路径：从 body 层级开始渐进控制
真正减少维护成本的做法，是放弃“全部归零再重写”，转为“只干预真正需要统一的部分”：
- 先清最干扰的：
body { margin: 0; line-height: 1.5; }（解决各浏览器body默认 8px 外边距和行高差异） - 再控内容流：
h1, h2, h3, p, ul, ol, blockquote { margin-block: 0 1rem; }（保留语义间距，只调幅度） - 列表缩进用现代属性：
ul, ol { padding-inline-start: 2rem; }（兼容 RTL，比padding-left更稳健）
复杂点在于：不同浏览器对 fieldset、details、input[type="search"] 的 UA 样式实现不一致，靠通配符根本覆盖不全；真正该花时间的地方，是识别哪些元素在你的项目中实际产生了干扰，再针对性处理——而不是幻想一行代码解决所有问题。
