在大多数情况下，当空格位于块元素旁边时，浏览器会忽略它。

图像(在本例中)的问题是它们是内联元素，因此当您将它们写在单独的行上时，它们实际上是同一行上的元素，它们之间有一个空格(因为换行符也算作空格)。浏览器删除图像之间的空格是不正确的，在它们之间使用换行符编写图像标记应该与在同一行中使用空格编写图像标记的处理方式相同。

你可以使用CSS来让图像块元素和浮动它们彼此相邻，这解决了很多关于间距的问题，包括图像之间的空间和图像下面的文本行上的间距。

缩小你的HTML!

在将响应呈现给浏览器之前缩小响应是一种很好的实践。

因此，除非您需要空格(并且您使用 硬编码)，否则您总是在缩小过程中删除空格。

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

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

试试这个CSS:

img { display: table-cell; }

对此的最新解决方案是使用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容器。