图片链接点击区域大于视觉范围是因a标签为行内元素，受line-height、vertical-align及空白符影响；用outline可精准暴露实际点击区域，配合display:block等调整可收缩至图片边界。
图片链接点击区域比视觉范围大，不是 bug，是行内元素默认行为 + CSS 布局干扰共同导致的；用 outline 快速标出真实可点击边界，比猜更可靠。
用 * { outline: 1px solid red !important } 显式暴露所有可点击区域
浏览器不会告诉你“哪块能点”，但会忠实渲染 outline —— 它不占布局空间，却能完整包裹元素的**实际点击响应区域**（包括因 line-height、vertical-align 或空白符撑开的部分）。
-
outline比border更适合调试：它绕过盒模型，始终紧贴元素的“逻辑边界”，哪怕该元素是inline且被基线对齐拉偏 - 在控制台直接执行：
javascript:(function(){document.head.innerHTML+='<style>*{outline:1px solid #f00!important;}</style>'})();，瞬间高亮全部可点击上下文 - 若页面太杂，缩小范围：只加给
a > img或.logo-container a，避免干扰判断
a 包裹 img 时，为什么左侧/下方仍有点击区？
根本原因不是图片本身，而是 a 默认为 inline 元素，其宽度由内容决定，但高度受父级 line-height 和字体度量影响；img 作为替换元素，默认 vertical-align: baseline，会在底部留出约 4px 空隙，这部分也属于 a 的点击区域。
- 检查 Elements 面板中该
a元素的 computed styles，重点关注height、line-height、vertical-align - 临时修复：给
a加display: block或display: inline-block，再设vertical-align: top或bottom - 禁止对
img自身设display: flex—— 这是无效声明，浏览器会忽略，但开发者可能误以为生效了
如何确认修复后点击区真正收缩到图片视觉边界？
不能只看样式是否“看起来对了”，得验证点击响应是否被物理限制。最直接的方法是用 outline + 尺寸约束双重验证。
- 给容器（如
.logo-container）设明确宽高，例如width: 100px; height: 100px;，并加overflow: hidden - 让
a设为display: block，img设为display: block（消除行内间隙），再加max-width: 100%; height: auto; - 再次运行 outline 调试脚本，观察红色轮廓是否严丝合缝贴住图片边缘，而非延伸到容器外或留白处
容易被忽略的是：outline 只显示当前渲染状态下的边界，但它不反映 JavaScript 动态插入或伪类（如 :hover）触发的尺寸变化；如果点击区异常出现在交互后，得在对应状态下调用 outline。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
