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

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

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

试试这个CSS:

img { display: table-cell; }

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

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

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

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

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，然后空白就会消失!

缩小你的HTML!

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

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