Question

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

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>

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

Answer 1

因为内联元素对代码中的空格敏感。你可以删除它：

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以使用HTML注释占用...</a><a>

等空间

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

最后（phew）你可以向左浮动链接：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

默认为html float：left可以是u的解决方案。 css是

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

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

a:visited
{
  color: #6BBFDB;
}

锚标签之间的空白区域

2 个答案: