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/

Answer 3

我想我可能会找到一种很酷的解决方法:-)。我开始使用<!-- comments -->来填充空< 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/

Answer 4

链接之间的空格可能是由代码中的换行符产生的，但实际上取决于您获得此行为的浏览器（某些浏览器会忽略这些字符）。

尝试将所有三个标记放在一行中，并且它们之间没有空格。

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

Answer 5

如何将它们置于ul / li结构中？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

以上所有答案都显示了摆脱那些不受欢迎的空白的一些巧妙方法，但我看不到我用了差不多十年的那个;所以对于那些仍在与那个空白搏斗的人来说，这是另一个简单的解决方案 - 使用浮动！

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/

Answer 7

你可以使用弹性盒：

div {
    display: flex;
}

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

或者如果您使用 Bootstrap：

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