title: Line height gap - not centering content vertically
body: <p>I am working on a jQuery mobile site, and for some reason, the <code>line-height</code> is not works as I expected. So I thought, maybe I made a mistake, so I tried it with a simple empty page, also on jsfiddle. Here is the <a href="http://jsfiddle.net/uwakdf1m/1/" rel="nofollow">JSFIDDLE</a> link. As I remember, I did it a million times, to center an element vertically in another element.</p>
  
  <p>So, when you see the result, you see, there red box is not in the center of the green box. I mesured, at the top, there are 22px, and at the bottom there are 16px.</p>
  
  <p>Can anybody explain me, why is this happens, and how can I fix it?</p>
  
  <pre><code>&lt;div style="height: 60px; width: 200px; line-height: 60px; border: 1px solid #0f0; box-sizing: border-box"&gt;
      &lt;div style="display: inline-block; height: 20px; width: 40px;  border: 1px solid #f00; box-sizing: border-box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>