title: overflow:hidden on inline-block adds height to parent
body: <p>I'm certain this has been asked before in some form or other, but I just can't find an answer..</p>
  
  <p>I have some nested divs</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;A&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the child has display:inline-block and overflow:hidden</p>
  
  <pre><code>.parent{
      background-color:red;
  }
  .child{ 
      background-color:green; 
      display:inline-block;
      overflow:hidden; 
  }
  </code></pre>
  
  <p>And it gets rendered like this:
  <img src="https://i.stack.imgur.com/JcpKK.png" alt="enter image description here"></p>
  
  <p>You can notice that the parent is 5px higher than the child. </p>
  
  <p>Where does the extra height come from? </p>
  
  <p>Here is the sample: <a href="http://jsfiddle.net/w8dfU/" rel="noreferrer">http://jsfiddle.net/w8dfU/</a></p>
  
  <p><strong>Edit:</strong>
  I don't want to remove display:inline-block or overflow:hidden, this is a simplified example to illustrate the problem, but in my real layout I need them both.
  I just want to understand why this extra height appears. Is it specified somewhere that it should be like this? Is it a consequence of some other css feature?</p>