title: List of blocks and inline-blocks show incorrect vertical spacings
body: <p>I have a simple list of <strong>div</strong>s, with the exception that one div is an <code>inline-block</code></p>
  
  <pre><code>&lt;div&gt;xxxxxxxxxxxxxxxxxxxx&lt;/div&gt;
  &lt;div&gt;xxxxxxxxxxxxxxxxxxxx&lt;/div&gt;
  &lt;div&gt;xxxxxxxxxxxxxxxxxxxx&lt;/div&gt;
  &lt;div&gt;xxxxxxxxxxxxxxxxxxxx&lt;/div&gt;
  ...
  
  div {
      background-color: #000;
      color: #fff;
      line-height: 20px;
      font-size: 20px; 
  }
  
  div:nth-child(5) {
      display: inline-block;
      color: #bada55;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jeanluca/2uLb0frk/6/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>all looks just fine (font-size :20px). However, when I change the font-size to 10px things are getting weird</p>
  
  <p><a href="https://i.stack.imgur.com/y5kfd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y5kfd.png" alt="enter image description here"></a></p>
  
  <p><a href="http://jsfiddle.net/jeanluca/2uLb0frk/7/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>Although I can fix it by adding </p>
  
  <pre><code>body { font-size: 0 }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jeanluca/2uLb0frk/8/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>I still don't understand why it did work with a line-height and font-size of 20px ? Any suggestions ?</p>