您可以将容器的字体大小设置为0，然后空白就会消失!

这个解决方案有什么困难之处?

css

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

html

<span class="no-whitespace">

    <a href=# title='image 1'>
       <img src='/img/img1.jpg' alt='img1'/>
    </a>

    <a href=# title='image 2'>
       <img src='/img/img2.jpg' alt='img2'/>
    </a>

    <a href=# title='image 3'>
       <img src='/img/img3.jpg' alt='img3'/>
    </a>

</span>

您可以将容器的字体大小设置为0，然后空白就会消失!

对此的最新解决方案是使用display: flex外部容器，您可以尝试以下示例:

代码笔→

(是的，Flexbox正在得到广泛支持:http://caniuse.com/#search=flexbox)

HTML:

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.box {
  display: flex;
  display: -webkit-flex;    
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}

更新:此外，如果你想要你的项目包装(标准的内联块元素做)，不要忘记添加flex-wrap: wrap到你的flexbox容器。

图像是默认的内联元素，这就是为什么你会看到它们之间有空格。如果你在屏幕阅读器上听你的例子，你马上就知道为什么了:如果没有空白，你会听到:

我的小东西，小东西，小东西，小东西

所以，用我的迷你东西。(点加空格结束)作为alt文本或推与CSS一起的图像。不要只是删除代码中的空白。

<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

好吧，我可能是幸运的，因为我现在只需要担心让这个工作在webkit(特别是一个嵌入在QT)，所以它在Chrome和Safari也工作。似乎display: table-cell拥有display: inline-block的所有优点，但没有空白的缺点(想想缩进的td)