HTML/CSS中是否有任何东西告诉浏览器完全忽略空白?

很多时候,当你想把两张图片放在一起时,你拼命地想保持HTML的可读性,但浏览器在它们之间放了一个空格。

所以不是这样的:

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

你会得到这个

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

这太可怕了!


当前回答

如果您使用的是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;?>

其他回答

您可以将容器的字体大小设置为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; }

缩小你的HTML!

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

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

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

我的小东西,小东西,小东西,小东西

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