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>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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments