Html Question posted in
Some basic documentation can be found here.

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

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

enter image description here

enter image description here

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

Tags:

2

Answers


  1. 0

    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%;
}
    Login or Signup to reply.
  2. 0 
    nav {
  height: 50px;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav ul {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
}

nav li {
  margin: 0;
}

nav li a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  padding: 0 15px;
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 50px;
  transition: background-color 0.3s;
}

nav li a:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 178, 54);
}

    Try this!

    nav styling: Added display: flex and align-items: center to ensure items are vertically centered.
    nav ul styling: Used display: flex for proper horizontal alignment without gaps.
    nav li a styling:
    Set display: flex and align-items: center to vertically center the content inside the element.
    Adjusted padding to 0 15px to ensure no extra space at the top and bottom.
    Set height: 50px and line-height: 50px to make sure the element fills the height of the navbar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search