html - anchor 标签之间的空白

标签 html css

<分区>

谁能解释一下为什么 anchor 标记之间有空白,以及如何在不使用负值的情况下删除它,例如 margin 属性?

JSFiddle

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>

我以前没见过这个,可能是因为总是希望 anchor 之间有空间,但这次我不希望 anchor 之间有空间,所以这就是我第一次偶然发现这个问题的原因。

最佳答案

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

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>

最后(呸)你可以将链接 float 到左边:

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>

关于html - anchor 标签之间的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35799492/

相关文章:

html - 为三 Angular 形 div 创建阴影

jquery - 我怎样才能用 jquery 获得这种效果(在高度上)?

css - 使用 CSS 调整未知图像大小?

css - (WordPress) 我如何居中画廊?

html - "Chinese dollar"货币符号的 HTML 标记是什么?

javascript - 我无法通过按钮设置 <div> 背景颜色

javascript - 如何使用 jQuery 从 anchor 标记获取链接

html - <div> 如何扩展其 <li> 父元素的长度?

html - 为什么外部 CSS 不能与 HTML 一起工作?

javascript - 在调整大小期间,Chrome 和 Safari 不会可靠地更新样式(webkit 错误?)