Unknown Space Between Links

I have three links:    About    &nbs

Solution 1:

Line breaks are/should be treated as a single white space in HTML. You can update your markup to this (line break before the closing tag, but no space before the next A tag)

<a href="/about" class="f_link">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;
</a><a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;
</a><a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</a>

Solution 2:

Add float: left; to your .f_link declaration, that will remove spaces.

http://jsfiddle.net/wMwEQ/

Also, using   for spacing is baaaad, even though it's not an issue here.

Solution 3:

You may want to slightly change your layout to get the results you're looking for...plus this:

   About   

Is really unnecessary.

HTML:
<ul class="my_list">
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
</ul>

CSS:
.my_list { overflow:hidden; } // Clear floats
.my_list li { float:left; list-style:none; margin:0; padding:0; }
.my_list li a { padding:0 10px; }

That should do what you want.

Solution 4:

The space is the spaces between the </a> closing tag and the following <a> opening tag. Remove that space in your markup and you should have the desired effect.

Solution 5:

One solution to this problem is also to include all the links in a div and set the div's font-size:0; then set the font-size of the links as you wish.

You can check the fiddle below for more info

fiddle