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

我已经经历了几次，包括最近，在我的HTML页面的呈现版本中出现了很小的空格。凭直觉，我认为这些内容不应该存在，因为在文本或者实体之外，页面HTML的格式无关紧要，但显然很重要。

我指的是这是我从客户端获得的一些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>

等等。

问题在于图像之间有一个很小的空间，这是不可接受的，因为客户端希望此像素完美(看起来很糟糕)。

一种使其正确渲染的方法是删除图像之间的回车符

<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

我认为这是不可取的，或者通过JavaScript或者使用模板系统和动态html动态创建html。

我不知道这对于页面是否足够通用，但是我们可以对这些特定的标签进行分类，然后将它们全部浮动，然后再将它们捆绑在一起，无论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>

原因很简单：在HTML中，空格很重要，但只有一次。重复的空格将被忽略，仅显示第一个。

像我们一样，避免这种情况的唯一可靠方法是在元素之间不留空格。

如果基于表的布局要少于当前的布局，则可以使用零边界零填充表来对齐元素，同时在源代码中将它们放在单独的行上。

如果我们要在网站上创建选项卡式界面，请花大力气正确地进行操作，这将是值得的。有许多网站提供了CSS选项卡实现的出色示例。考虑使用其中之一。

这个有很多CSS + Javascript / AJAX标签。或者查看这组简单的CSS示例(有些样式)。最后，检查一下这个实际上很酷的标签生成器。

我们上面展示的行为是正确的，因为浏览器将回车符视为一个空格。要修复它，我们可以使用以下方式设置它的样式：

a { display: block; float: left; }

请注意，以上规则将其应用于所有链接，因此我们可能希望仅将选择器缩小到某些元素，即：

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

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

这将为我们提供更大的灵活性，并使标记更具可读性。