锚点之间的CSS不需要的间距

我有这个样式表:

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

a{

  background:yellow;

}

和这个网页:

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

结果是:

在这里输入图像描述

我如何让这些锚标签互相“接触”,从而去除中间的不需要的空间?

谢谢卢卡


您需要删除标签之间的空格(本例中换行符)。 一些浏览器将其渲染为空间。


你可以使用这个技巧来摆脱空间:

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

现场演示: http : //jsfiddle.net/quucy/


我想我可能会发现一个非常酷的方式来解决它:-)。 我开始使用<!-- comments -->填充空白< span > s < span >等。

所以,如果你想保持你的锚定在一个新的行结构,并不希望他们之间的空间......只需在行的末尾打开一个块注释,并结束它在新行之前新< anchor >

喜欢这个:

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

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

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

上一篇: CSS unwanted spacing between anchor

下一篇: block extra margin