Html 锚标签元素之间的 CSS 不需要的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6902237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS unwanted spacing between anchor-tag elements
提问by luca
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
谢谢卢卡
回答by Alex Feinman
You need to remove the whitespace (in this case the newline) between your tags. Some browsers render it as a space.
您需要删除标签之间的空格（在本例中为换行符）。一些浏览器将其呈现为一个空格。
回答by ?ime Vidas
You can use this trick to get rid of the space:
你可以使用这个技巧来摆脱空间：
HTML:
HTML：
<div id="test">
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</div>
CSS:
CSS：
#test { font-size:0; }
#test a { font-size:16px; background:yellow; }
Live demo:http://jsfiddle.net/quucy/
现场演示：http : //jsfiddle.net/quucy/
回答by Luká? ?ádek
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.
我想我可能会找到一个很酷的方法来解决它:-)。我从使用<!-- comments -->填充空< span >s 等的事实开始。
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 >
因此，如果您想保留新行上的锚点结构并且不希望它们之间有空格......只需在行尾打开一个块注释，并在新行之前的新行结束 < 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/
回答by J.T. Houtenbos
How about puting them in ul/li structure?
把它们放在 ul/li 结构中怎么样？
#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>回答by brezanac
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>
回答by lost-and-found
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:
HTML:
<div id="test">
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</div>
CSS:
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/
jsfiddle:http://jsfiddle.net/fjj7dsyx/2/
