如何去除<code>a</code>标签元素轮廓且不破坏子元素，使锚点适配子元素图片尺寸

默认情况下<a>标签是行内元素，盒模型不会自动适配子元素<img>的完整尺寸，导致焦点高亮轮廓范围不正确。以下是具体解决方案：

核心思路 #

将<a>标签改为行内块级元素，使其尺寸完全包裹<img>，再调整焦点样式确保高亮范围覆盖子元素完整宽高。

完整代码示例 #

HTML #

<a href="#">
  <img alt="picsum" src="https://picsum.photos/200/300">
</a>

CSS #

a {
  display: inline-block; /* 让a标签的盒模型适配img的宽高 */
}

a:focus {
  outline: none; /* 移除默认可能偏移的轮廓样式 */
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5); /* 自定义焦点高亮，完全覆盖元素范围 */
}

说明 #

1. display: inline-block：将行内的<a>转为行内块级元素，其宽高会自动匹配子元素<img>的尺寸，解决轮廓范围过小的问题。
2. 自定义焦点样式：直接移除outline会影响键盘导航的可访问性，因此用box-shadow替代，确保焦点可见且范围准确。

内容的提问来源于stack exchange，提问作者Fluxian