11

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

Community
  • 1
  • 1
Radu Maris
  • 5,648
  • 4
  • 39
  • 54

1 Answers1

16

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>
Rob W
  • 341,306
  • 83
  • 791
  • 678