* { margin: 0; padding: 0; } 不是好主意，因为它抹杀元素原生布局语义，导致表单控件紧贴边框、标题堆叠、列表缩进消失，且无法区分需保留与需归零场景，反而增加维护成本。
为什么 * { margin: 0; padding: 0; } 不是好主意
它确实能“清除”默认边距，但代价是抹掉所有元素的原生布局语义。比如 input、button、textarea 会失去默认内边距，文字紧贴边框；h1~h6 失去上下间距后堆叠难读；列表项 li 的缩进消失，嵌套结构直接坍塌。
更麻烦的是，它无法区分「需要保留默认样式」和「需要归零」的场景，后续反而要不断手动加回 margin 和 padding，维护成本更高。
更稳妥的替代方案：只重置真正需要归零的容器
现代项目推荐用 html 或 body 层级做最小干预：
-
body { margin: 0; }—— 解决多数浏览器给body默认8px外边距的问题 - 如需进一步控制，可加
box-sizing: border-box;到*, *::before, *::after，但不要连margin/padding一起塞进去 - 对表单控件、标题、段落等，用组件化思路单独定义间距，而不是靠通配符暴力归零
遇到老项目必须用通配符时，怎么降低风险
如果接手遗留代码，发现已广泛使用 * { margin: 0; padding: 0; }，别急着删，先检查实际影响范围：
- 打开 DevTools，选中几个典型元素（如
h2、p、ul），看 computed 样式里margin和padding是否被覆盖为0 - 在 CSS 开头追加针对性修复，例如：
h1, h2, h3, h4, h5, h6 { margin-block: 0.83em 0.67em; }（还原 Chrome 默认值） - 避免在
*::before/*::after上再设margin/padding，它们本就不该有默认边距，加了反而干扰伪元素定位
真正该关注的兼容性细节
不同浏览器对「默认样式」的实现其实有差异，比如：
- Firefox 给
fieldset加了2pxmargin，Chrome 没有 - Safari 对
input[type="search"]的padding处理更宽松 -
details/summary在旧版 Edge 中没有默认margin，但现代浏览器有
所以与其依赖通配符“一劳永逸”，不如在项目初期就引入轻量 reset（如 modern-normalize），它只修正差异，不消灭语义。通配符重置就像用锤子调音叉——力道难控，响度全无。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
