2

可能重复：
忽略 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" />

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

4

1 回答 1

1

您可以浮动图像，例如

#container img { float: left }

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

#container { font-size: 0 }
于 2012-10-14T21:40:31.397 回答