padding 是唯一能真正扩大点击热区的 CSS 属性，因其参与浏览器热区计算（content box + padding box），而 margin、transform 等均不参与；需配合 display 和 box-sizing 使用，并注意父容器裁剪、遮罩、touch-action 等干扰。
直接加 padding 是最稳、兼容性最好、无障碍友好的解法，其他方案要么不参与热区计算，要么引入布局或事件干扰。
为什么 padding 是唯一能真正扩大点击热区的 CSS 属性
浏览器判定点击是否命中，只看元素的 content box + padding box，margin、font-size、line-height、transform: scale() 全都不算在内。iOS Safari 和 Android Chrome 都严格按这个规则执行。
-
padding不触发重排，不影响语义，屏幕阅读器照常读取内容 - 纯行内元素（如默认
<a>）必须先设display: inline-block或display: block，否则垂直方向padding无效 - 务必配合
box-sizing: border-box，否则padding会让总尺寸失控，尤其在 Flex/Grid 容器里容易挤占邻居 - 推荐起手值：
padding: 12px 20px（上下 12px × 2 + 行高 ≈ 44px 总高），图标按钮可统一用padding: 12px
伪元素 ::before 扩热区时总失效？检查这三处硬条件
伪元素本身不响应点击，也不能自动“撑开”热区——它只是视觉延伸，必须靠定位+事件透传才能生效。真机点不中，八成是漏了其中一项。
- 目标按钮必须设
position: relative，否则::before定位失准 -
::before必须有content: ""+position: absolute+inset: -12px（或等效top/left/right/bottom偏移） -
::before必须显式写pointer-events: none，否则它会拦截事件，真实按钮收不到点击 - 父容器不能含
overflow: hidden、transform、will-change: transform，否则伪元素被裁剪或坐标错乱
加了 padding 还点不中？真机上常被忽略的干扰项
样式写了，computed 里也看到 padding 生效，但手指点下去没反应——问题大概率不在按钮本身，而在它的上下文。
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
overflow: hidden，把padding区域裁掉了 - 上层有透明伪元素（比如遮罩层）或
pointer-events: none的 DOM 节点，实际挡住了热区 - 意外写了
touch-action: none，尤其在滚动容器里，直接禁用了所有触摸响应 - 按钮嵌在
position: absolute+transform的父层中，视觉位置和热区错位 - 调试技巧：临时加
outline: 1px solid red，一眼看出实际响应边界是否被截断
真正难处理的不是怎么写样式，而是确认热区是否被父层裁剪、是否被遮罩覆盖、是否被 touch-action 锁死——这些往往得靠真机录屏+触摸反馈叠加来验证，模拟器看不出来。
