Иконки Navbar отделяют гиперссылку от тега

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

Вы можете легко достичь этого макета, используя свойства flexbox:

.nav a {
  float: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  background-color: black;
  text-decoration: none;
  padding: 3px;
  height: 15px;
  width: 15px;
}

.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>

Он имеет преимущество в том, что не искажает круги.

Answer 2

Вы должны удалить 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>

Answer 3

Удалите свойства высоты и ширины тега a и установите отступ для значков

.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;
  */
}

i {
  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>