按钮点击区域小本质是padding未生效，主因是display设为inline导致垂直padding被忽略；须改用inline-block/block，配合min-width/min-height:44px、box-sizing:border-box及touch-action:manipulation确保触控达标。
按钮点击区域小，本质是 padding 没起效
直接加 padding 却没变大？大概率是按钮用了 display: inline（比如被父级 flex 或某些 UI 库重置），此时 padding-top 和 padding-bottom 在 Safari、旧版 Android WebView 中会被忽略。检查开发者工具的 Computed 面板，确认 display 值不是 inline。
正确做法是显式设为 display: inline-block 或 display: block。如果按钮在 flex 容器里，还要留意 align-items 是否把内容“顶”到了顶部，导致视觉上留白不均。
-
display: inline-block是最稳妥的默认选择，兼容性好、垂直 padding 稳定 - 避免用
float布局按钮，容易引发外层塌陷，间接压缩可用空间 - 若按钮含 SVG 或图标字体，检查是否因
vertical-align: baseline导致基线偏移——这会让点击区域视觉错位，实际可点范围变窄
移动端必须满足 44px × 44px 最小触控目标
iOS Safari 和 Android 系统对触控有隐式最小尺寸要求。即使按钮看着够大，padding 不足时，真机上仍会判定为“难点击”。不能只靠 font-size 撑开——文字变大 ≠ 点击热区变大。
关键组合写法：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
button {
padding: 12px 20px;
min-width: 44px;
min-height: 44px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
touch-action: manipulation;
}
-
min-width/min-height是兜底项：文字很短时（如“×”、“+”），仅靠padding可能撑不到 44px - 禁用
-webkit-tap-highlight-color: transparent后，必须保留足够padding，否则用户完全感知不到点击是否生效 - 绝对不要设
touch-action: none，这等于主动关闭原生点击
padding 值写几个才不踩坑
CSS 的 padding 顺序永远是「上→右→下→左」顺时针，不是 margin 的逻辑，也不能套用 Tailwind 的 pt-2 命名习惯。漏单位（如 padding: 10）或顺序错，效果就全乱。
-
padding: 10px→ 四边统一 10px（最简，适合图标按钮） -
padding: 8px 16px→ 上下 8px、左右 16px（文字按钮最常用） -
padding: 6px 12px 8px→ 上 6px、左右 12px、下 8px（表头按钮常用，顶部呼吸感强） -
padding: 4px 8px 12px 16px→ 上=4、右=8、下=12、左=16（需精准控制时用）
小于 4px 的 padding 在多数设备上不可见；超过 24px 易挤压内容，尤其小屏下可能触发横向滚动。
图标按钮和纯文字按钮的 padding 差异
带图标的按钮（比如 <i class="icon-search"></i>）不能照搬文字按钮的 padding。图标本身占空间，且 font-size 放大后上下留白常不均。
- 纯文字按钮推荐：
padding: 10px 16px - 图标按钮推荐：
padding: 10px 20px（左右多留 4–8px，防图标贴边或截断） - 若图标用
font-size: 1.2em放大，建议同步微调padding-top/padding-bottom，否则上下留白不对称 - 别单独加
padding-left—— hover 时背景色可能闪烁，或文字相对图标偏移
真正容易被忽略的是：padding 不是孤立属性。它和 font-size、line-height、vertical-align、甚至 SVG 渲染基线都耦合在一起。调一个值前，先确认其他样式是否已收敛。
