black_yurizan black_yurizan - 3 months ago 9
CSS Question

How to remove whitespace from a div/container

I have a navigation menu link that has extra whitespace at the bottom of the div tag with the id of nav. It is not because margin or padding, but there is some sort of whitespace that is not allowing the ul tag to touch the bottom of the div with the id of nav. How do I get it to do so. Here is the link



* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}

<div id="nav">
<ul>
<li><a href="#">link</a>
</li>
<li><a href="#">link</a>
</li>
<li><a href="#">link</a>
</li>
<li><a href="#">link</a>
</li>
</ul>
</div>




Answer

The gap is reserved space given to descender text elements (e.g. j, y, g). Remove it by adding vertical-align:top to your <ul>

* {
  padding: 0;
  margin: 0;
}
#nav {
  border: 1px solid black;
  text-align: center;
  min-width: 300px;
}
#nav ul {
  padding: 10px 0;
  display: inline-block;
  vertical-align: top;
}
#nav li {
  float: left;
  list-style: none;
  margin-left: 50px;
}
#nav a {
  text-decoration: none;
  color: black;
  padding: 15px 10px;
}
#nav a:hover {
  color: white;
  background: black;
}
<div id="nav">
  <ul>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
  </ul>
</div>

Note that the list items poke out below the div because of the padding you applied to #nav a which can be adjusted.