title: Mysterious padding/margin between <li> and <ul> elements
body: <p>I was building a menu when I noticed this gap between <code>&lt;li&gt;</code> and <code>&lt;ul&gt;</code>. Even setting margin and padding to 0 doesn't solve it, I have no idea of where it comes from.</p>
  
  <p>I isolated the issue in the example below.</p>
  
  <p>Code rendered: <a href="http://gyazo.com/a8051a862c08c4dce4ce0b44ab4b271b" rel="nofollow">http://gyazo.com/a8051a862c08c4dce4ce0b44ab4b271b</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
     &lt;style&gt;
        div#container{
           display: inline-block;
           border: 5px solid #00ff00;
        } 
  
        ul{
           list-style: none;
           margin: 0px;
           padding: 0px;
           border: 5px solid #0000ff;
  
        }
  
        li{
           display: inline-block;
           border: 5px solid #ff0000;
           width: 30px;
           height: 30px;
           margin: 0px;
           padding: 0px;
        }
     &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="container"&gt;
     &lt;ul &gt;
        &lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Funny thing is that if I write anything inside the <code>&lt;li&gt;</code> elements, the gap disappears. Can somebody explain to me what is going on and how I can remove this gap?</p>