HTML源代码中锚点之间的换行会在浏览器中产生空白间隙。

Question

可能是重复问题：
如何消除内联元素之间的空格可见性？

我通常会格式化我的源代码，使其易于人类阅读。据我所知，浏览器会从源代码中删除任何 \n\t 字符，因此它们不会进入渲染后的 HTML。

今天我创建了一个菜单，在渲染后的 HTML 中的 2 个锚点之间有几个像素的空白，但我无法在 CSS/HTML 中找到这个“空”空间的源头。经过几个小时的尝试，我移除了源代码中 2 个锚点之间的换行符 (\n)（以防万一），结果空白处消失了。

我在这里创建了一个 演示。

第一个菜单元素的锚点在源代码中处于同一行，另外两个菜单项的锚点之间有一个换行符。（悬停在菜单元素上即可看到我在说什么）。我在 Firefox 8.0、Firefox Nightly 11.0a1 (2011-12-01) 和 Chromium 14.0.835.202 (Developer Build 103287 Linux) Ubuntu 11.10 上都遇到了相同的情况。

我只是不明白为什么会出现这种情况。

我做错了什么，如何避免这种行为（而不改变源代码的可读性）？

- Radu Maris

Answer 1

锚点是内联元素。如果在元素之间添加空格、制表符、换行符等空白字符，将会出现间隙。

根据情况，您可以使用以下任意一种方法消除该间隙：

• 添加负的margin-left，如margin-left:-4px;
• 使用float，如float:left;

• 去除元素之间的空白字符。为了使代码看起来更加可读，您可以在开标签后进行换行，例如：

  <a href="..">Link</a><a
     href="..">Link 2</a>
  

- Rob W

---

虽然这不应该导致垂直位移，除非它们意外地出现在行尾。 - GolezTrol

我今天学到了新的东西，谢谢。 - Radu Maris