html - 导航栏图标与超链接标签分开

Question

我正在尝试创建一个带有 a 标签和图标的导航栏，但由于某种原因，它们之间存在分离，其中 a 标签背景并不直接位于图标。 这是我的意思的图像:https://gyazo.com/986c59e17f031ce0b94547af6bceebac 这是我当前的导航栏 html 和 css:

.nav a {
  float: right;
  display: block;
  margin-right: 10px;
  background-color: black;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  padding: 3px;
  height: 10px;
  width: 10px;
}

.nav a:hover:not(.active) {
  background-color: grey;
  border-radius: 20px;
}

.nav a:not(.active) {
  color: white;
  border-radius: 20px;
}

.active {
  background-color: yellow;
  border-radius: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
  <a href="#"><i class="fa fa-fw fa-align-justify"></i></a>
  <a href="#"><i class="fa fa-fw fa-wifi"></i></a>
  <a href="#"><i class="fa fa-fw fa-user"></i></a>
  <a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>

如何修复此问题以使 a 标签和图标对齐？

Answer 1

您必须删除 line-height和size在您的链接上<a> ，像这样:

.nav a {
  float: right;
  display: block;
  margin-right: 10px;
  background-color: black;
  text-align: center;
  text-decoration: none;
  padding: 3px;
}

.nav a:hover:not(.active) {
  background-color: grey;
  border-radius: 20px;
}

.nav a:not(.active) {
  color: white;
  border-radius: 20px;
}

.active {
  background-color: yellow;
  border-radius: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav">
  <a href="#"><i class="fa fa-fw fa-align-justify"></i></a>
  <a href="#"><i class="fa fa-fw fa-wifi"></i></a>
  <a href="#"><i class="fa fa-fw fa-user"></i></a>
  <a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>