忽略HTML中的空格

Question

忽略HTML中的空格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" />太可怕了！

Answer 1

哦，你可以很容易地用一行CSS:

#parent_of_imgs { white-space-collapse: discard; }

劣势，你问？没有浏览器实现这一点。非常有用的特性(一般认为内联块)。-(

我不时做的事情，虽然它是丑陋的，因为夜晚是黑暗的，是使用评论：

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>

Answer 2

您可以设置font-size.的.集装箱到0而white-space消失！

Answer 3

在大多数情况下，浏览器会忽略块元素旁边的空白。

图像(在本例中)的问题是它们是内联元素，所以当您将它们写在不同的行上时，它们实际上是在同一行上的元素，在它们之间有一个空格(因为换行算作空格)。浏览器移除图像之间的空格是不正确的，在图像之间写入带有行间隔的图像标记的方式应该与将图像标记写在同一行之间的方式相同。

您可以使用CSS使图像阻塞元素并使它们相互浮动，这解决了图像之间的空间和图像下方文本行上的间距等许多问题。