title: Why does inline-block cause this div to have height?
body: <p><strong><em><a href="http://jsfiddle.net/FE3Gy/"><code>jsFiddle Demo</code></a></em></strong></p>
  
  <p>I cannot seem to figure out why using <code>display:inline-block</code> would cause this <code>&lt;div&gt;</code> element to somehow gain height when its containing element was hidden. This does not happen with <code>display:block</code>.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div style="display:inline-block;"&gt;&lt;input type="hidden" /&gt;&lt;/div&gt;
  &lt;div&gt;Gap above created by inline-block&lt;/div&gt;
  &lt;div style="display:block;"&gt;&lt;input type="hidden" /&gt;&lt;/div&gt;
  &lt;div&gt;No gap above if using block&lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.imgur.com/N725KRd.png" alt="screenshot of jsfiddle"></p>
  
  <p>Why does <code>display:inline-block</code> cause the gap depicted here?</p>