Unknown space between links

问题

I have three links:

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

I have some CSS styling for them:

.f_link{
height:38px;
padding-top:12px;
margin:0px;
color:gray;
}
.f_link:hover{
color:black;
text-decoration:none;
}

How this html is displayed in FF 3.6, IE 8, and some version of Google Chrome:

And this is how I would like it to be displayed in my three major browers:

I used firebug and it said there is no padding or margin between these links. What is that space there for then, and how can I get rid of it? I'm open to suggestions!

回答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>

回答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.

回答3:

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

&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;

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.

回答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.

回答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

来源：https://stackoverflow.com/questions/5147258/unknown-space-between-links

标签

html

css

hyperlink