直接写 button { padding: 0; border: none; } 能清除最显眼的默认内边距和边框，但因浏览器用户代理样式动态计算 padding、appearance 触发原生渲染，还需配合 box-sizing: border-box、appearance: none（含各前缀）及 font: inherit; line-height: normal; vertical-align: middle 才能彻底归零并确保跨浏览器一致。
button 默认 padding 和 border 怎么清掉
直接写 button { padding: 0; border: none; } 就能去掉最显眼的默认内边距和边框。但要注意：不同浏览器对 button 的默认 font-size、line-height、vertical-align 处理不一致，光清 padding 和 border 不够。
推荐做法是针对性重置，而不是盲目套用通配符：
-
button元素单独处理，避免影响其他元素（比如input[type="button"]也要同步） - 加上
font: inherit;和line-height: normal;，防止字体撑高或基线错位 - 若按钮内含文字，
vertical-align: middle;可解决 inline 场景下的对齐漂移
为什么不能只靠 * { margin: 0; padding: 0; }
这个规则看着省事，但实际会埋坑：
-
<textarea></textarea>、<select></select>、<input>等表单控件依赖默认padding和border实现可点击区域，全清后可能点不中 -
<pre class="brush:php;toolbar:false;"></pre>、<blockquote></blockquote>等语义化元素失去结构感，阅读体验变差 - 现代布局（如 Flex/Grid）对
margin归零反而容易引发意外换行或塌陷
真正需要的是「按需归零」——只对明确要自定义的元素下手，比如 button、a、ul、h1 等。
reset.css 和 normalize.css 到底选哪个
二者不是替代关系，而是设计哲学不同：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
reset.css（如 Meyer Reset）目标是「归零一切」，把所有元素拉到同一起跑线，适合从零构建、强定制需求的项目 -
normalize.css目标是「修复差异」，保留有用的默认样式（比如h1比h2大、small缩小字号），只修正浏览器间不一致的部分 - 如果你用的是现代框架（React/Vue）+ CSS-in-JS 或 Tailwind，更推荐
normalize.css—— 它不会破坏组件库内置的 reset 逻辑
注意：normalize.css 默认不碰 button 的 appearance，所以仍需手动加 -webkit-appearance: none; 来干掉 Safari/iOS 的圆角和阴影。
移动端 button 样式失效的常见原因
在 iOS Safari 或 Android Chrome 上，button 常常“清不干净”，典型表现是仍有圆角、阴影、点击反馈灰块。这是因为 WebKit 内核强制应用了 -webkit-appearance。
必须显式覆盖：
button, input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }- 加上
border-radius: 0;防止圆角残留 - 点击时的蓝色外框（focus outline）要用
outline: none;，但请同时提供替代焦点样式（比如box-shadow: 0 0 0 2px #007bff;），否则可访问性不达标
最后提醒：清除默认样式只是起点，不是终点。button 的 cursor: pointer;、user-select: none;、禁用态 opacity: .6; pointer-events: none; 这些才是让交互真正可控的关键细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
