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

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>

如果您使用的是php，这将非常有效。我在这里找到了答案。

我最初是想在用simplexml之类的东西解析html后删除仅由空白组成的文本节点，但这要便宜得多。

<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
    <img src='./mlp.png'/>
    <img src='./dbz.png'/>
    <img src='./b10af.png'/>
    <img src='./fma.png'/>
<?ob_end_flush;?>

试试这个CSS:

img { display: table-cell; }

<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来让图像块元素和浮动它们彼此相邻，这解决了很多关于间距的问题，包括图像之间的空间和图像下面的文本行上的间距。

这是一个简单的问题，但答案并不那么简单。

人们可以尝试避免源代码中的空格，这在CMS中并不总是可以实现，因为它们是由系统自动插入的。如果你想改变这一点，你必须深入挖掘CMS的核心代码。

Then you can try to use left floated images. But this is dangerous. At first you don't really have a control over vertical-alignment by definition. And secondly, you run into total chaos if you have so many floated elements, that they stretch over more than one line. And if you have a layout that relies on left floated elements (most of them do so today) you can even break some outer floating styles, if you clear floating after the images. This can be overridden, if you float any surrounding element. Rather not to be recommended.

因此，唯一的解决方案是使用CSS声明来处理空格处理过程。这不是任何标准的一部分(因为css3还没有完成)。

我更喜欢在HTML变体中没有空白。使用drupal作为CMS，这可以在你的template.php和主题文件中很容易实现。然后我选择内联块。

注: 在不同的浏览器中使用内联块相当复杂。 对于FF 2，你需要显示:-moz-inline-box。 其余的和IE8可以有display: inline-block后立即。 对于ie7，你需要在下面单独的声明中显示:inline(最好是通过条件注释)。

edit

我用来做一个元素内联块

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}