Question

我试图在我的网站顶部放置一些链接，但是当我这样做时，它们之间会有一个小的大约十个像素空间。有人可以解释一下它出了什么问题。

Html：

<div id="socialLinks">
     <a href="www.google.com">Google</a>
     <a href="www.facebook.com">Facebook</a>
</div>

的CSS：

#socialLinks{
    /* Positioning */
    margin-left:auto;
    text-align:right;   
}

#socialLinks a{
    /* Sizing */
    padding-right:5px;
    padding-left:5px;

    /* Decoration */
    text-decoration:none;
    background-color:#9FD9FF;

    /* Font */
    font-family:"Times New Roman", Times, serif;
    font-size:25px;

    /* Border */
    border-style:solid;
    border-right-style:none;
    border-width:2px;
    border-color:#000000;
}

Answer 1

浏览器喜欢在渲染时将所有空格压缩到一个空格中（查看此StackOverflow问题以获取更多信息）。这是由浏览器引起的，而不是由样式表引起的。这是HTML的一个属性，其中新行将被视为空格。

要解决此问题，您可以将所有<a>标记放在同一行，但代码看起来不是很干净（如JSFiddle所示）

Answer 2

尝试更改：

padding-right:5px;
padding-left:5px;

到

padding-right:0;
padding-left:0;

或者如果没有在其他地方设置填充，只需完全删除这些行。

编辑：@ j08691是对的，这根本不起作用。它是两个a标记之间的空白。答案是未经编辑的，因为你的贬低乐趣。

为什么有空间？

2 个答案: