How to remove whitespace from a div/container - html

Question

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>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>

Answer 1

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>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</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.

Answer 2

To fix your problem do this:
Change #nav ul to this:
#nav ul {
padding: 10px 0;
}
Change #nav li to this:
#nav li {
display: inline-block;
list-style: none;
margin-left: 50px;
}

Answer 3

remove margin-left: 50px; from your #nav li.Its creating unwanted white space on your menu.The width of menu will depend on the lenth of text

Answer 4

Something to do with the inline-block it seems. There's no space with inline-flex or display: table;
#nav ul {
padding: 10px 0;
display: inline-flex;
background-color: black;
}
inline-block's biggest problem was it's handling of fonts, it adds a ghost 'padding' of 4 to 5px after each element, depending on browser.
Here's a rewrite that uses the font-size: 0 method to negate the effects.
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* allow percentages to be calculated without border and padding messing things up */
}
#nav {
border: 1px solid black;
min-width: 300px;
}
#nav ul {
list-style-type: none;
font-size: 0; /* font-size: 0; is a method to remove the ghost padding added after inline-blocks, one of the many reasons display: flex is becoming so popular */
}
#nav li {
display: inline-block;
width: 25%; /* control width here */
text-align: center;
}
#nav a {
display: block; /* allow element to expand to match parent size by changing from <a> default display: inline to block */
text-decoration: none;
color: black;
font-size: 15px; /* reset font-size here */
line-height: 30px; /* control element height here */
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
fiddle
https://jsfiddle.net/Hastig/wfrxgxjm/