使用显示内联块居中的div会导致行间隔

Question

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

然而，它导致每行图像下方有一个小的（约3个像素）间距。是否有任何方法可以使图像在每行上方/下方没有间距？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

只是为了好的衡量标准，这里有一个屏幕截图，显示了我所指的差距：

Answer 1

您可以通过向图片添加// messages is the InputDStream in this example messages.foreachRDD( x => { // Write business logic x.saveToCassandra("keyspace_name", "table_name") } 来解决此问题。

<强> CSS

vertical-align: top;

.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;
}

Answer 2

浏览器会自动在（所考虑的）文本行之间添加一些空格。您只需将font-size: 0添加到图像的包装器即可解决此问题。