可点击区域小是因为padding和min-width/min-height不足导致触控目标低于44px×44px标准；需检查display类型（避免inline）、设置box-sizing:border-box、防范Flex/Grid压缩及overflow:hidden截断热区。
可点击区域和视觉尺寸不一致，本质是元素的渲染盒（rendering box）与交互热区（hit area）没对齐——不是“设置错了”，而是默认行为没被显式覆盖。
为什么 <a> 或 <button> 点击区域比看起来小
行内元素（如默认 <a>）的点击热区只包裹文字内容，padding 在旧版 Safari/Android WebView 中可能被忽略；<button> 若未设 display，在部分环境下会退化为 inline，导致垂直方向热区严重缩水。
- 用开发者工具检查「Computed」面板，确认
padding-top/padding-bottom是否生效，尤其注意display值是不是inline - 移动端必须设
min-height: 44px和min-width: 44px，W3C 推荐触控目标下限，不是建议值 - 避免仅靠
font-size撑开尺寸——文字变大 ≠ 热区变大，line-height和vertical-align会干扰实际高度
<map> + <area> 的 coords 偏移问题怎么修
坐标偏移不是 bug，是设计使然：<area> 的 coords 基于原始图片像素尺寸，CSS 缩放、max-width、transform: scale() 都会让热区“点不准”。
- 只在图片尺寸完全固定（无任何 CSS 缩放、无响应式断点）时用
<map>，比如后台管理页的静态图标导航 -
usemap="#xxx"中的#不可省略，且<map name="xxx">必须存在且大小写严格匹配 - 响应式场景改用 SVG 内嵌
<path>+pointer-events: visiblePainted，或用 JS 动态重算 coords（成本高，慎用）
让链接块级化并填满容器的三步实操
想让一个 <a> 完全覆盖父容器（比如卡片上的整块区域），关键不是“加宽”，而是让它成为布局参与者。
立即学习“前端免费学习笔记（深入）”；
- 给
<a>设display: block或display: inline-block（后者兼容文字流，推荐） - 父容器需有明确尺寸（
height、min-height或 flex/grid 分配空间），否则<a>无法“撑满” - 若父容器是 flex column（如卡片底部按钮锚定），确保
<a>是直接子元素，且未被overflow: hidden截断圆角或阴影
最易被忽略的一点：很多团队花时间调 z-index 或 pointer-events，却忘了检查父容器是否设置了 overflow: hidden ——它会把超出边界的点击热区直接裁掉，哪怕视觉上没截断。
