为何包裹在div中的锚点（a标签）轮廓不可见？

我有两个带链接的图片，其中一个被包裹在<div>中：

对应的代码如下：

.container {
  display: flex;
  margin: 100px;
  gap: 40px;
}

a {
  outline: 4px solid red;
}

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

<div class="container">
  <a href="https://google.com">
    <img src="https://as2.ftcdn.net/v2/jpg/01/36/70/67/1000_F_136706734_KWhNBhLvY5XTlZVocpxFQK1FfKNOYbMj.jpg" alt="smiley" />
  </a>
  <div>
    <a href="https://google.com">
      <img src="https://as2.ftcdn.net/v2/jpg/01/36/70/67/1000_F_136706734_KWhNBhLvY5XTlZVocpxFQK1FfKNOYbMj.jpg" alt="smiley" />
    </a>
  </div>
</div>

为消除链接底部的多余空白，我给img添加了display: block样式：

img {
  width: 40px;
  height: 40px;
  display: block;
}

但此时被<div>包裹的链接轮廓消失了：

现象原因 #

核心问题出在浏览器的布局规则上：

• 原本<img>是行内元素时，<a>作为内联元素会被图片撑开，红色轮廓能正常显示；
• 当给<img>加上display: block后，被<div>包裹的那个<a>（内联元素）没法正确包裹块级子元素，浏览器会让这个<a>的高度直接塌陷成0，自然就看不到轮廓了；
• 而第一个没被<div>包裹的<a>，因为是flex容器的直接子元素，flex布局会自动把它转为flex项，强制被图片撑开，所以轮廓还在。

最佳解决方法 #

方法1：给<a>设置display: inline-block或block（推荐） #

直接让<a>成为块级/行内块级元素，就能正确包裹块级的<img>，高度被撑开后轮廓自然显示，同时也能保证<a>的点击区域正常：

a {
  outline: 4px solid red;
  display: inline-block; /* 也可以用 display: block */
}

img {
  width: 40px;
  height: 40px;
  display: block;
}

方法2：用vertical-align: bottom替代display:block消除空白 #

如果不想改变<img>的显示类型，也可以给行内的<img>设置vertical-align: bottom来消除底部空白，这样<a>的轮廓不会受影响：

img {
  width: 40px;
  height: 40px;
  vertical-align: bottom;
}

方法3：给<div>内的<a>设置display: contents（仅适合图片单独点击的场景） #

这个方法会让<a>的样式应用到子元素<img>上，但<a>本身不再占据布局空间，点击区域只限于图片范围，不适合需要扩大点击区域的场景：

div a {
  display: contents;
}

img {
  width: 40px;
  height: 40px;
  display: block;
}

优先推荐方法1，既能解决空白问题，又能保证<a>的布局和交互逻辑正常，兼容性也最好。

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