html - 为什么小空间不断出现在我的网页中？

Question

这可能是一个愚蠢的问题，但如果有更好或更合适的方法来做到这一点，我很乐意学习。

我已经遇到过几次，包括最近，在我的 HTML 页面的渲染版本中出现了小空间。直觉上我认为这些不应该存在，因为在文本或实体之外，页面 HTML 的格式应该无关紧要，但显然它确实如此。

我指的是这个 - 我有一些来自客户的 Photoshop 文件，说明他们希望他们的网站看起来如何。他们希望此文件中的图像看起来基本上是像素完美的。

页面中的一个地方需要一个菜单​​栏，其中每个菜单栏都会在悬停时进行更改，充当超链接等。在 Photoshop 文件中，这是一个长栏，因此是一种便宜且简单的方法这样做只是将该片段分割成多个图像，然后将它们并排放置在文件中。

所以我本能地这样安排(还有更多内容，但这是要点)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

等等。

问题是图像之间的空间很小，这是 Not Acceptable ，因为客户希望这个东西像素完美(而且看起来很糟糕)。

让它正确呈现的一种方法是删除图像之间的回车符

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

这使得图像彼此相对(期望的效果)但它使行非常长并且代码更难以维护(它在 SO 中包装，这是一个简化版本 - 真正的更长文件名和 JavaScript 用于悬停)。

在我看来，这不应该发生，但看起来 HTML 中的回车符被呈现为一个小的空白区域。这在所有浏览器中都会发生，看起来像。

我认为上面的两个片段应该呈现相同的内容是对还是错？我做错了什么吗？也许用错误的编码保存文件？我是否应该让这些链接中的每一个都成为一个完美定位的 CSS 元素？

Answer 1

空格(包括回车符)在所有浏览器中通常呈现为空格。

你需要一个接一个地放置元素，但是你可以使用一个技巧:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

这看起来也有点难看，但总比单行好。您可能会更改格式，但想法是在元素内部而不是元素之间添加回车符。