链接点击区域由display、盒模型和布局上下文共同决定；默认行内a仅包裹内容，block则占满父宽，需用inline-block或fit-content控制宽度，图片链接须设a为block消除行内间隙，卡片可点需避免嵌套交互元素，图片热点coords基于原始像素尺寸，移动端热区不小于44×44px。
链接的可点击区域不是“文字多大就多大”，而是由其 display 行为、盒模型尺寸和布局上下文共同决定的。默认 <a></a> 是行内元素，热区仅包裹内容；一旦设为 block 或 inline-block，就必须主动控制宽高或最大宽度，否则要么热区过大（右侧空白可点），要么过小（微按钮点不中）。
为什么 display: block 的链接右边还能点中
因为块级 <a></a> 默认宽度是父容器 100%，哪怕内容只有“登录”两个字，整行都响应点击。这不是 bug，是 CSS 规范行为。
- 常见错误：只加
padding或margin，却不改width或max-width - 正确解法：用
max-width: fit-content（现代浏览器）或display: inline-block（全兼容）来收束宽度 - 注意：
fit-content在 Safari 15.4+ 才稳定支持；若需兼容旧版 iOS，优先选inline-block - 示例：
a.button { display: inline-block; padding: 8px 16px; }—— 热区严格贴合文字+内边距
图片链接的点击区域总比图片大怎么办
根源在于 <a></a> 包裹 <img alt="如何在HTML中限定链接的可点击区域" > 时，<a></a> 仍是行内元素，受行高、基线对齐、空白符影响，导致顶部/底部/左侧出现“隐形热区”。
- 必须让
<a></a>变成块级：加display: block或display: inline-block - 禁止给
<img alt="如何在HTML中限定链接的可点击区域" >设display: flex（无效且破坏渲染） - 推荐结构：
<div class="logo-container"><a href="/home"><img src="logo.png" alt="Home"></a></div>
，再对.logo-container控制尺寸和居中 - 关键样式：
.logo-container a { display: block; }—— 消除行内间隙，热区与图片视觉边界对齐
要整个卡片可点，但又不能误触内部按钮
把整张卡片变成一个 <a></a> 是最干净的做法，但前提是卡片内部不能再有其他可交互元素（比如按钮、开关、输入框），否则会触发嵌套事件冲突或语义混乱。
立即学习“前端免费学习笔记（深入）”；
- 允许的子元素：纯文本、
<span></span>、<strong></strong>、<img alt="如何在HTML中限定链接的可点击区域" >（无onclick） - 禁止的子元素：
<button></button>、<input>、带onclick的<div>、其他 <code><a></a> - 必须加
text-decoration: none和color: inherit，避免下划线和颜色突兀 - 移动端要注意：如果卡片高度不足 44px，需用
padding补足热区，例如：.card.--linked { padding: 12px; min-height: 44px; } - 检查
usemap="#myMap"和<map name="myMap"></map>是否完全一致（大小写、#号） - 禁用 CSS 的
width: 100%或max-width，改用<img style="max-width:90%" style="max-width:90%" alt="如何在HTML中限定链接的可点击区域" >固定原生尺寸 - 移动端热区至少 44×44px：矩形
coords="x1,y1,x2,y2"要满足x2−x1 ≥ 44且y2−y1 ≥ 44 - 真机测试不可省：模拟器无法反映真实触控精度，iOS Safari 对小热区尤其敏感
用 <map></map> 做图片热点时 coords 总是偏移
坐标失效几乎全是尺寸缩放惹的祸。<area> 的 coords 值永远基于图片原始像素尺寸（即 <img alt="如何在HTML中限定链接的可点击区域" > 的 width/height 属性值，或文件真实分辨率），CSS 缩放不会重算它。
真正难的不是写出能点中的代码，而是判断「这个链接该有多大热区」——是刚好包住文字？贴合图片边缘？撑满卡片？还是精确到某几个像素点？每种选择背后都是交互意图和无障碍要求的权衡，不能只看能不能点，得看点得是否合理。
