* { margin: 0; padding: 0; } 不够用，因破坏表单控件、列表项等默认布局，忽略 box-sizing 差异，且无法覆盖 ua 隐藏样式；应配合 box-sizing: border-box 与针对性恢复。
为什么 * { 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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 有 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保证表单字段间距合理
重置不是删光一切，而是把不可控的默认值，换成你明确知道、能预测、可维护的值。最常被忽略的，其实是那些没报错、没崩、但交互变卡顿、点击变困难的“隐形退化”。
