直接加padding并设box-sizing:border-box和display:inline-block或block，是最稳解法；因点击热区仅含content+padding box，margin不参与事件捕获，且button默认inline-block、现代浏览器默认border-box，故padding真实扩展hit testing范围。
直接给按钮加 padding 并确保 box-sizing: border-box，同时显式设 display: inline-block 或 display: block，是最稳、兼容性最好的解法。其他靠 font-size、line-height、transform: scale() 的方式基本无效，甚至在 iOS Safari 中点不中。
button 加 padding 为什么能真正扩大点击区域
浏览器的点击热区默认只包含 content box + padding box，margin 完全不参与事件捕获。而 <button></button> 默认是 display: inline-block，现代浏览器也默认 box-sizing: border-box，所以加 padding 后，热区坐标范围会真实扩展到 padding 边界——不是视觉错觉，是底层 hit testing 变了。
- 若被重置为
display: inline，旧版 Safari 和部分 Android WebView 会忽略padding-top/padding-bottom，垂直热区直接缩水 - 若父容器设了
overflow: hidden（尤其配合border-radius），padding 区域可能被裁切，导致“看着能点，实际点不中” - 别用
font-size: 0清除间隙后忘了恢复图标或伪元素的渲染尺寸，否则热区撑开了但内容不可见
移动端必须满足 44×44px 最小触控目标
iOS Safari 和主流安卓 WebView 强制要求触控目标物理尺寸 ≥ 44×44px，仅靠文字撑开的按钮常只有 16–20px 高，根本达不到标准。光靠 padding 在文字很短时也不保险。
- 推荐组合：
min-height: 44px+padding: 12px 20px+display: inline-block - 避免只写
height: 44px，它可能和line-height冲突，或在 flex 容器中被对齐方式拉扯变形 - 加
touch-action: manipulation减少 300ms 点击延迟，尤其在微信内置浏览器里效果明显 - 务必加
cursor: pointer，否则用户无法感知可点击状态
用伪元素 ::after 扩展热区的硬性条件
伪元素可以“无感”扩大热区，但必须同时满足三个条件，缺一不可，否则白搭。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 父元素必须有定位上下文（如
position: relative），否则::after的position: absolute会脱标错位 -
::after必须写content: ""，且显式设pointer-events: none（不是auto）——否则它会拦截事件，反而挡住真实按钮 - 不能设
z-index: -1或被其他层遮挡，热区必须在最上层才能捕获触摸事件 - 推荐用
inset: -10px替代分别写top/left/right/bottom，更简洁不易出错
为什么 label 包裹 input 不适用于“加入购物车”按钮
<label></label> 天然扩展热区只对 <input type="checkbox"> 和 <input type="radio"> 生效，这是 HTML 语义规范强制行为。对按钮类操作，<label></label> 无法绑定 click 行为，强行套用会导致语义错误、无障碍失效、键盘导航断裂。
- 不要写
<label><button>加入购物车</button></label>——<button></button>是替换元素，<label></label>对它无热区映射能力 - 若卡片内已有
<button></button>，又想整卡可点，应监听容器 click 并用event.target.matches('button')过滤，避免重复触发 - 禁用
pointer-events: none、touch-action: none、user-select: none等样式，它们在某些 WebView 中会静默阻断热区传导
真正容易被忽略的是：热区是否生效，不取决于你写了多少 CSS，而取决于 DOM 结构是否干净、父级是否静默截断、以及移动端是否满足物理尺寸硬约束。真机测试前，先用 outline: 1px solid red 检查 padding 是否完整可见，再看 computed styles 里 pointer-events 和 overflow 的最终值。
