CSS标签元素之间的CSS不需要的间距

Question

我有这个样式表:

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

a{

  background:yellow;

}

和这个网页:

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

结果是:

在此输入图像描述

如何让这些锚标签相互"接触",消除其间不需要的空间？

谢谢卢卡

Answer 1

您需要删除标记之间的空格(在本例中为换行符).有些浏览器会将其渲染为空格.

Answer 2

您可以使用此技巧摆脱空间:

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/

请谨慎使用此代码,因为您可能会将Web抓取工具解释为滥用,因为您明确地将文本隐藏在包含链接的元素中.确实,由于更高的特异性规则,链接本身是可见的,但仍然网络爬虫看到容器内的一堆链接,告诉所有的祖先隐藏他们的文本内容. (12认同)

Answer 3

我想我可能会找到一种非常酷的解决方法:-).我开始使用填充空< span >s等的事实.

因此,如果你想保持你的新线结构并且不想要它们之间的空格......只需在线的末尾打开一个块注释,然后在新线之前将其结束. < anchor >

像这样:

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