CSS unwanted spacing between anchor-tag elements

问题:

I have this stylesheet:

*{
    padding: 0px;
    margin: 0px;
}

a{

  background:yellow;

}

and this webpage:

<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>    

Results in:

How do I make those anchor tag to "touch" each other,removing that unwanted space in-between?

thanks Luca

回答1:

You need to remove the whitespace (in this case the newline) between your tags. Some browsers render it as a space.

回答2:

You can use this trick to get rid of the space:

HTML:

<div id="test">
    <a href="/blog/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>   
</div>

CSS:

#test { font-size:0; }
#test a { font-size:16px; background:yellow; }

Live demo: http://jsfiddle.net/quucy/

回答3:

I think I might find a pretty cool way to solve it :-). I started with the fact of using <!-- comments --> to fill empty < span >s etc.

So if you want to keep your anchor-on-a-new-line structure and do not want the spaces between them... simply open a block comment on the end of the line and end it on the new line just before new < anchor >

Like this:

<div id="test">
    <a href="/blog/">Home</a><!--
    --><a href="/about/">About</a><!--
    --><a href="/contact/">Contact</a>   
</div>

and DEMO: http://jsfiddle.net/Lukis/reZG2/1/

回答4:

The space between the links might be produced by newline characters you have in your code but it really depends in which browser you get this behavior (some browser ignore these characters some do not).

Try putting all three tags in a single line and without spaces between them.

<a href="/blog/">Home</a><a href="/about/">About</a><a href="/contact/">Contact</a>

回答5:

How about puting them in ul/li structure?

#test li {
    background:yellow; 
    float: left;
    list-style: none;
}

<ul id="test">
  <li><a href="/blog/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

回答6:

All the above answers show some neat ways of getting rid of that unwanted whitespace but I don't see the one I've been using for almost a decade; so here's another simple solution to your very old problem for people who still wrestle with that whitespace -- use float!

HTML:

<div id="test">
  <a href="/blog/">Home</a>
  <a href="/about/">About</a>
  <a href="/contact/">Contact</a>   
</div>

CSS:

#test { 
  overflow:hidden; 
 /* this isn't really required here but helps; 
 or use your preferred method for clearfix  */
}

#test a { 
  float:left; 
  background: yellow;
}

jsfiddle: http://jsfiddle.net/fjj7dsyx/2/