输入代码中的返回行导致输出中元素之间的间隙/空白？ [复制]

Question

可能重复：
Ignore whitespace in HTML

我正在尝试在网页上将图片并排放置。这是我的 HTML：

<img class="pt" src="Yellow Tulip.jpg" title="Yellow Tulip" alt="Yellow Tulip" />
<img class="pt" src="Pink Tulip.jpg" title="Pink Tulip" alt="Pink Tulip" />
<img class="pt" src="Purple Tulip.jpg" title="Purple Tulip" alt="Purple Tulip" />

但是，在我的网页上，这显示了每张图片之间的差距。我注意到，一旦我删除了使元素分开且可读的返回行，而是将所有元素放在一行上，这些空白就消失了。

<img class="pt" src="Yellow Tulip.jpg" title="Yellow Tulip" alt="Yellow Tulip" /><img class="pt" src="Pink Tulip.jpg" title="Pink Tulip" alt="Pink Tulip" /><img class="pt" src="Purple Tulip.jpg" title="Purple Tulip" alt="Purple Tulip" />

无论如何我可以实现后者的输出，但代码/输入仍然看起来像前者？我真的很喜欢返回行（输入空格）给代码带来的可读性，但我不想要它在实际页面上创建的空白。如果有人能解释为什么会这样和/或如何解决它，我将不胜感激！ :)

Answer 1

你可以浮动图片，比如

#container img { float: left }

或设置容器字体大小以使空间不可见

#container { font-size: 0 }