我有两个链接图像，其中一个被 Package 在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>

为了去掉链接底部多余的空格，我在图片中添加了display: block：

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

但是，现在， Package 在div中的链接没有轮廓：

为什么会这样？解决这个问题的最好方法是什么？