锚标签之间的空白区域

Question

任何人都可以解释为什么锚标签之间有空白区域以及如何在不使用例如保证金属性的负值的情况下将其删除？

https://jsfiddle.net/5khf8ys7/

HTML:

a {
  margin: 0;
  padding: 5px;
  border: 1px #6BBFDB solid;
  text-decoration: none;
  color: #6BBFDB;
  background-color: #888;
  border-radius: 3px;
}

a:hover {
  background-color: #999;
}

a:visited {
  color: #6BBFDB;
}

CSS:

<div class="container">
  <a href="#">What is this whitespace? -&gt;</a>
  <a href="#">&lt;- What is this whitespace?</a>
</div>

我之前没有看过这个,也许是因为总是希望锚之间有空间,但这次我不希望锚之间有空间,所以这就是我第一次偶然发现这个问题的原因.

Answer 1

因为内联元素对代码中的空白区域很敏感.你可以删除它:

a
{
  margin: 0;
  padding: 5px;
  border: 1px #6BBFDB solid;
  text-decoration: none;
  color: #6BBFDB;
  background-color: #888;
  border-radius: 3px;
}

a:hover
{
  background-color: #999;
}

a:visited
{
  color: #6BBFDB;
}

<div class="container">
<a href="#">What is this whitespace? -&gt;</a><a href="#">	&lt;- What is this whitespace?</a>
</div>

您也可以使用HTML注释来占用空间 ...</a><!-- --><a>

a {
  margin: 0;
  padding: 5px;
  border: 1px #6BBFDB solid;
  text-decoration: none;
  color: #6BBFDB;
  background-color: #888;
  border-radius: 3px;
}
a:hover {
  background-color: #999;
}
a:visited {
  color: #6BBFDB;
}

<div class="container">
  <a href="#">What is this whitespace? -&gt;</a><!--
  --><a href="#">	&lt;- What is this whitespace?</a>
</div>

另一种选择是在容器上将字体大小设置为零,然后在链接上恢复它:

a {
  margin: 0;
  padding: 5px;
  border: 1px #6BBFDB solid;
  text-decoration: none;
  color: #6BBFDB;
  background-color: #888;
  border-radius: 3px;
}
a:hover {
  background-color: #999;
}
a:visited {
  color: #6BBFDB;
}
.container {
  font-size:0;
}
.container a {
  font-size:initial;
}

<div class="container">
  <a href="#">What is this whitespace? -&gt;</a>
  <a href="#">	&lt;- What is this whitespace?</a>
</div>

最后(phew)你可以浮动左边的链接:

a {
  margin: 0;
  padding: 5px;
  border: 1px #6BBFDB solid;
  text-decoration: none;
  color: #6BBFDB;
  background-color: #888;
  border-radius: 3px;
}
a:hover {
  background-color: #999;
}
a:visited {
  color: #6BBFDB;
}
.container a {
  float:left;
}

<div class="container">
  <a href="#">What is this whitespace? -&gt;</a>
  <a href="#">	&lt;- What is this whitespace?</a>
</div>