html - 使用显示内联 block 居中 div 会导致行下方的间距

Question

在下面的示例中，我试图创建一个包含任意数量的其他 div 的 div，这些 div 居中并且每行包含四个 div(最后一行包含但是如果图像总数不能被整除则剩下许多)四)。

但是，它会导致每行图像下方有一个小间距(大约 3 像素)。有什么方法可以使图像在每行上方/下方没有间距吗？

.container {
  width: 100%;
  display: table;
  text-align: center;
}
.image {
  display: inline-block;
  width: 25%;
}
.image img {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

<div class="container">
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
</div>

为了更好地衡量，这里有一张屏幕截图显示了我所指的差距:

Answer 1

您可以通过向图像添加 vertical-align: top; 来解决此问题。

CSS

.image img {
  vertical-align: top;
}

.container {
  width: 100%;
  display: table;
  text-align: center;
}
.image {
  display: inline-block;
  width: 25%;
}
.image img {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

<div class="container">
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
  <a href="#" class="image">
    <img src="http://placehold.it/400x400" alt="">
  </a>
</div>