Home/ Questions/Q 6876597
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:29:50+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0