点击热区由border-box决定，即content+padding+border范围；纯行内元素需设display:inline-block/block使垂直padding生效，box-sizing:border-box确保尺寸可控，推荐padding:12px 20px适配44px最小触控尺寸。
点击热区由 border-box 决定，不是“看起来在哪就在哪”
浏览器判定一个点击是否命中元素，依据的是它的布局盒（layout box），而默认就是 border-box —— 即 content + padding + border 的总范围。哪怕你没设背景、没画边框，只要 padding 存在，它就属于合法点击区域。这不是视觉欺骗，是事件系统的真实坐标映射。
常见错误现象：a 标签只加了 padding: 12px 却点不中顶部和底部；button 加了 padding 后总高度仍不到 44px，在 iOS 上边缘点击失效。
- 纯行内元素（如默认
a、span）必须先设display: inline-block或display: block，否则垂直方向padding不生效 -
box-sizing: border-box是前提：它让padding被算进设定的width/height内，避免撑开布局导致换行或错位 - 移动端最小触控尺寸建议按 44px × 44px 设计，
padding: 12px 20px是常用起手值（上下 12px + 行高 ≈ 44px）
margin 不参与点击响应，但会让点击反馈“看起来偏了”
margin 完全不进入事件坐标系统——它只影响布局位置，不扩展也不收缩可点击区域。但正因为元素被 margin 推开了，而 :active 变色又严格按 border-box 渲染，所以你会看到点击反馈“悬空”在父容器里，或者和相邻元素之间出现奇怪的空白间隙。
常见错误现象：外层 div 给了 margin: 8px，里面 a 点击时背景色只包文字，边缘留白；或者用 margin 对齐按钮组，结果某一项点击反馈明显错位。
立即学习“前端免费学习笔记（深入）”；
-
:active的变色范围始终以元素自身的border-box为准，margin区域永远不着色 - 若想让点击反馈“贴边”，别靠
margin挪位置，改用padding+box-sizing: border-box控制整体尺寸 - 用
transform: translate()微调位置比margin更安全——它不影响文档流，也不会干扰点击反馈对齐
transition 改 width/height 会导致点击区域不同步
对 width、height、padding 做 transition，动画过程中视觉尺寸在变，但点击热区不会实时插值更新。结果就是：按钮正在缩小，你却还能点中它原始大小的位置；或者刚放大一半，手指已经点不中了。
这是渲染管线与事件坐标系统不同步的自然表现，不是 bug。
- 优先用
transform: scale()+opacity组合过渡：它们不改变布局盒，点击区域随视觉同步缩放 - 绝对避免对
padding或margin加transition，这类属性变化会直接扰动盒模型计算 - 如果必须做尺寸动画，用
transform: scaleX()/scaleY()替代，并配overflow: hidden防内容溢出干扰点击
overflow: hidden 和 pointer-events: none 是最常被忽略的“点击杀手”
明明 padding 设得够大，box-sizing 也正确，却还是点不中——大概率是父容器或子元素悄悄拦截了事件。
常见错误现象：给按钮加了 padding: 20px，但点击区域只响应在文字上；或者在滚动容器里，底部按钮的 padding 区域完全点不了。
-
overflow: hidden会裁剪掉超出父容器的部分，包括padding区域，导致那部分不可点 - 子元素（比如图标
img或svg）占满 content 区且没设pointer-events: none，就会拦截点击，使padding区域无法触发父级事件 - 祖先节点误设了
pointer-events: none，整个分支都失活；可用开发者工具逐层检查 computed styles
display 类型、box-sizing 模式、overflow 状态和事件冒泡路径——少一个环节，热区就断一截。 
