空锚标签的高度为

Question

我正在编码可滚动的图像，由于某种原因，图像下方有空白。如果我将div设置为彩色背景，似乎不会发生这种情况。

我已经写出codepen来证明这一点。

<ul>
  <li>
    <div class="container">
      <a href="https://www.google.com">
        <div class="box1"></div>
      </a>
    </div>
  </li>
  <li>
    <div class="container">
      <a href="https://www.google.com">
        <img class="box2" src="https://source.unsplash.com/random" />
      </a>
    </div>
  </li>
</ul>

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  margin: 20px;
  width: 240px;
  max-width: 240px;
  max-height: 150px;
  overflow: auto;
}

.container, a {
  width: 100%;
  height: 100%;
}

li {
  -webkit-box-shadow: 0 0 5px 1px rgba(155,155,155,1);
  box-shadow: 0 0 5px 1px rgba(155,155,155,1);
}

.box1 {
  height: 1000px;
  width: 100%;
  background-color: red;
}

.box2 {
  width: 100%;
}

如果向下滚动并查看图像的底部，则会看到空白。

以下是我要注意的事情：

• .container => 240px x 164px
• a => 240px x 18px
• img => 240px x 160px
• 锚点在底部重叠图像，从而形成一个小的白色空白
• 容器说明了这两个元素的总高度

我不知道为什么会这样。