HTML源中锚点之间的新行在浏览器中创建空白区域

Question

可能重复:
如何删除内联元素之间的空格可见性？

我通常将我的源代码格式化为人类易于阅读,AFAIK浏览器\n\t从源代码中删除任何字符,因此它们不会进入渲染的html.

今天我构建了一个菜单,在渲染的html中有2个锚之间的几个像素,我找不到CSS/HTML中那个"空"空间的来源.几个小时后,我删除了\n源中2个锚点之间的新行()(以防万一),空白区域消失了.

我在这里创造了一个小提琴.

第一个菜单元素在源代码中具有相同行中的锚点,其他2个菜单项在锚点之间具有新行.(将鼠标悬停在菜单元素上,看看我在说什么).我在Firefox 8.0,Firefox Nightly 11.0a1(2011-12-01)和Chromium 14.0.835.202(Developer Build 103287 Linux)Ubuntu 11.10中具有相同的行为.

我只是不明白为什么会这样.

我做错了什么以及如何避免这种行为(不改变源代码的可读性)？

Answer 1

锚是内联元素.如果在元素之间添加空格(空格,制表符,newine,..),则会出现间隙.

根据具体情况,您可以使用以下任一方法来消除差距:

• 添加否定margin-left,例如margin-left:-4px;
• 使用float,例如float:left;

• 删除元素之间的空格.为了保持代码的可读性,您可以在开始标记之后中断,例如:

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