Navbar Icons are separating from hyperlink a tag

Question

I am trying to create a navbar with a tags and icons, but there is for some reason a separation between them where the a tag background is not directly behind the icon. Here is an image of what I mean: https://gyazo.com/986c59e17f031ce0b94547af6bceebac Here is my current html and css for the navbar:

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

How can I fix this to make the a tag and icon align?

user_7791111 · Answer

Remove height and width properties of the a tag and set the padding on the icons

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

user_8583669 · Answer

You can easily achieve this layout using flexbox properties just like that:

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

It has the advantage of not distorting the circles.

user_13228383 · Answer

You have to remove the line-height and size on your link , like this :

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

Navbar Icons are separating from hyperlink a tag

3 Answers