New line between anchors in HTML source creates em

Question

Possible Duplicate:
How do I remove the visibility of spaces between inline elements?

I usually format my source code to be easy read by humans, AFAIK browsers remove any \n\t characters from the source, so they do not get into the rendered html.

Today I built a menu that had a few pixels between 2 anchors in the rendered html and I couldn't find the source of that "empty" space in CSS/HTML. After a few hours I remove the new line (\n) between the 2 anchors in the source (just in case) and the empty space disappeared.

I created a fiddle here.

The first menu element has the anchors in the same line in the source code, the other 2 menu items have a new line between the anchors. (hover the menu element to see what I'm talking about). I have the same behaviour in Firefox 8.0, Firefox Nightly 11.0a1 (2011-12-01) and Chromium 14.0.835.202 (Developer Build 103287 Linux) Ubuntu 11.10.

I just can't understand why is this happening.

What I did wrong and how can I avoid this behaviour (without changing the readability of the source code) ?

Answer 1

Anchors are inline elements. If you add a white-space (space, tab, newine, ..) between the elements, a gap will appear.

Depending on the situation, you can use either of the following methods to get rid of the gap:

• Add a negative margin-left, e.g. margin-left:-4px;
• Use float, e.g. float:left;

• Remove the whitespace between the elements. To keep the code somewhat readable, you can break after the opening tag, eg:

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