A little gap under <a> inside of <li> in a navbar

June 5, 2024

So currently I’m making a navbar as a new programmer and I got a problem there are little gaps under the when my cursor hover over it.

White gap under user

<body>
  <header class="header">
    <?php session_start(); ?>
    <nav>
      <ul>
        <?php if (isset($_SESSION['status']) && $_SESSION['status'] == "login") { ?>
          <li><a class="roboto-medium" href="#">STORE</a></li>
          <li><a class="roboto-medium" href="#">CONTACT</a></li>
          <li><a class="roboto-medium" href="#">HOME</a></li>
        <?php } else { ?>
          <li><a class="fa fa-user" href="#"></a></li>
          <li><a class="roboto-medium" href="#">REGISTER</a></li>
        <?php } ?>
      </ul>
    </nav>
  </header>
</body>

nav {
  height: 50px;
  background-color: rgb(255, 255, 255);
  justify-content: space-between;
  align-self: center;
}

nav li {
  float: right;
  margin: 0;
}

nav > ul {
  list-style-type: none;
  display: block;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

nav > ul > li > a{
  text-decoration: none;
  color: rgb(0, 0, 0);
  padding: 15px;
  display: block;
  text-align: center;
}

li a:hover {
  text-decoration: none;
  display: flex;
  transition: .0s;
  height: 100%;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 178, 54);
}

I’m expecting the hover background colour to fill up the height without any gap left.

>Solution :

Set ul, li, a to height:100%

nav li {
  float: right;
  margin: 0;
  height: 100%;
}

nav > ul {
  list-style-type: none;
  display: block;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 100%;
}

nav > ul > li > a{
  text-decoration: none;
  color: rgb(0, 0, 0);
  padding: 15px;
  display: block;
  text-align: center;
  height: 100%;
}