锚点（Anchor）表现异常：图片hover时边框无法完整显示

问题描述 #

在<a>标签内嵌套图片，编写CSS实现鼠标悬停时显示5px实心青色边框，但实际边框无法完整显示。

问题原因 #

<a>标签默认是行内元素，行内元素的盒模型特性导致它无法自动撑开宽高以完整包裹内部图片及边框空间，边框会与图片布局重叠，最终被遮挡或显示不全。

解决方案 #

方案1：将a标签设为行内块/块级元素（推荐） #

让<a>能够正确包裹图片，预留出边框的显示空间：

img {
  height: 300px;
  width: 300px;
}

a {
  display: inline-block; /* 也可使用 display: block; 根据布局需求选择 */
}

a:hover {
  border: 5px solid cyan;
}

方案2：通过边距调整避免重叠 #

不改变a的显示类型，利用负外边距抵消边框宽度，防止图片遮挡边框：

img {
  height: 300px;
  width: 300px;
  margin: -5px;
}

a:hover {
  border: 5px solid cyan;
}

方案3：直接给图片添加hover边框 #

若需求允许鼠标悬停图片时触发边框效果，可直接为img设置hover样式：

img {
  height: 300px;
  width: 300px;
}

a:hover img {
  border: 5px solid cyan;
}

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