Html 为什么小空间总是出现在我的网页上？

这可能是一个愚蠢的问题，但如果有更好或正确的方法，我很乐意学习

我已经遇到过几次了，包括最近，在我的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>

这使得图像相互重叠（理想的效果），但这使得行非常长，代码更难维护（它在这里包装为SO，这是一个简化的版本-真正的版本有更长的文件名和JavaScript来进行悬停）

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

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

在所有浏览器中，空白（包括回车符）通常都作为空格呈现

您需要一个接一个地放置元素，但可以使用以下技巧：

<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>

---

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

这是HTML规范的一部分-空格在标记中，因此它们被视为文档的一部分

由于您不喜欢格式化，因此您唯一的其他选择是断开html标记：

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

---

我不知道这对于您的页面是否足够通用，但是您可以将这些特定的a标记分类并将它们全部向左浮动，然后它们将聚集在一起，无论您的HTML格式如何

<style>
    a.together {
        float:left;
    }
</style>

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


a、 一起{
浮动：左；
}
原因很简单：在HTML中，空格很重要，但只有一次。忽略重复的空白，只显示第一个空白

避免这种情况的唯一可靠方法是，正如您所做的那样，在元素之间不留空格

当基于表的布局比当前少时，您可以使用零边框、零填充的表来对齐元素，同时将它们放在源代码中的单独行上。
如果您要在网站上使用选项卡式界面，请尽最大努力正确地执行，这将是值得的。有很多网站都有CSS标签实现的好例子。考虑使用其中一个。

有很多CSS+Javascript/AJAX选项卡。或者看（一些样式）。最后，看看这其实很酷。
您上面演示的行为是正确的，因为浏览器将回车视为空格。要修复它，您可以使用以下方式设置其样式：

a { display: block; float: left; }

请注意，上述规则将其应用于所有链接，因此您可能希望将选择器仅限于某些元素，即：

#nav a { display: block; float: left; }

我处理这个问题的方法是使用无序列表，并使每个图像/链接成为一个项目。
然后使用CSS内联显示每个项目，并将其向左浮动

这将为您提供更大的灵活性，并使标记更具可读性。
各位，答案不错，我从未想过要这么做！这比一行要好，我应该试试这个。你不能浮动内联元素。你也必须使用“display:block”，我接受了这个答案，但我喜欢有人想出富有想象力的解决办法。谢谢@丹：嗯，我在FF3中测试了这个，它没有问题，可能是FF的标准合规性问题。回答不错，伙计们，我从没想过要这么做！
#nav a { display: block; float: left; }