html - 忽略 HTML 中的空格

Question

这个问题在这里已经有了答案:

How to remove the space between inline/inline-block elements? (41 个回答)

关闭 7年前。

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

哦，你可以用 a single line of CSS 很容易做到这一点。 :

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

缺点，你问？ 目前还没有浏览器实现了这个非常有用的功能(想想一般的内联 block )。 :-(

我时不时做的，虽然丑到夜深了，但就是用评论:

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