title: How to remove whitespace from a div/container
body: <p>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 <a href="http://jsbin.com/zesuwogoli/edit?html,css" rel="nofollow">link</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>