Image goes down inside navbar

September 9, 2022

In the code below, I have a navbar where I specify the height to be 40px, in #nav {... height:40px;} On the left of this navbar, I put a logo image. To make everything fit, I have resized the image to have height 40px also. Yet, as can be seen in the demo, the image goes down and is partially hidden.

What am I doing wrong ?

body {
  background: #666;
  color: white;
  font-family: Helvetica;
}

a {
  color: white;
  text-decoration: none;
}

ul {
  padding: 0;
}

#container {
  background: #333;
  width: 400px;
  margin: 30px auto;
  overflow: hidden;
}

#nav {
  background: #666;
  height: 40px;
}

#nav ul {
  padding-top: 13px;
  padding-left: 10px;
}

.lileft .li {
  list-style: none;
  float: left;
}

.lileft img {
  display: block;
}

#nav li {
  list-style: none;
  float: right;
  padding-right: 20px;
}

<div id="container">
      <div id="nav">
        <ul>
          <lileft><a href="https://imgbb.com/"><img src="https://i.ibb.co/WVxqWc7/crown.png" alt="crown" border="0"></a></li>
          <li><a href="pears.html">Pears</a></li>
          <li><a href="grapes.html">Grapes</a></li>
          <li><a href="apples.html">Apples</a></li>
          <li><a href="oranges.html">Oranges</a></li>
        </ul>
      </div>
    </div>

>Solution :

It’s cause you have padding-top on your ul which is affecting the first-child (image).

Set the padding on the li instead and exclude the :first-child using the :not() pseudo-class.

body {
  background: #666;
  color: white;
  font-family: Helvetica;
}

a {
  color: white;
  text-decoration: none;
}

ul {
  padding: 0;
}

#container {
  background: #333;
  width: 400px;
  margin: 30px auto;
  overflow: hidden;
}

#nav {
  background: #666;
  height: 40px;
}

#nav ul {
  padding-left: 10px;
}

#nav ul > li:not(:first-child) {
  padding-top: 13px;
}

#nav li {
  list-style: none;
  float: right;
  padding-right: 20px;
}

<div id="container">
  <div id="nav">
    <ul>
      <lileft>
        <a href="https://imgbb.com/"><img src="https://i.ibb.co/WVxqWc7/crown.png" alt="crown" border="0"></a>
      </lileft>
      <li><a href="pears.html">Pears</a></li>
      <li><a href="grapes.html">Grapes</a></li>
      <li><a href="apples.html">Apples</a></li>
      <li><a href="oranges.html">Oranges</a></li>
    </ul>
  </div>
</div>