CSS unwanted spacing between anchor

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


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/

链接地址: http://www.djcxy.com/p/15776.html

上一篇: 那是什么空间?

下一篇: 锚点之间的CSS不需要的间距