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-betwee开发者_如何学Cn?

thanks Luca

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

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/

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/

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>

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>

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/

You can use flexbox:

div {
    display: flex;
}

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

Or if you use Bootstrap:

<div class="d-flex">
    <a href="/blog/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>   
</div>