title: Vertical dimensions of inline-block elements with text of different font size
body: <p>I have a series of elements with display:inline-block. They contain text of different font-sizes, and are displayed next to each other.</p>
  
  <p>I am trying to understand where the vertical dimensions of the elements come from.</p>
  
  <p>Here is the simple code :</p>
  
  <pre><code>&lt;a class="icon"&gt;&lt;/a&gt;
  &lt;a&gt;H&lt;/a&gt;
  &lt;a class="icon"&gt;&lt;/a&gt;
  &lt;a&gt;H&lt;/a&gt;
  &lt;a class="icon"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>and the CSS :</p>
  
  <pre><code>a {
    font-family: consolas;
    display: inline-block;
    padding: 10px;
    font-size: 14px;
  }
  
  .icon:before {
    content: "H";
    font-size: 44px;
  }
  
  a:not(:empty) {
    padding: 25px; // (44-14) / 2 + 10
  }
  </code></pre>
  
  <p>Now, contrary to what I would expect, 25px is not the correct value for padding to compensate the font size difference, but 27px is. </p>
  
  <p><strong>I don't really understand why the text height for font-size: 44px is actually 51px and for 14px it is 17px.</strong> </p>
  
  <p>Once these values are taken into account, it makes sense (51 - 17) / 2 + 10 = 27 is the right padding compensation.</p>
  
  <p><a href="http://codepen.io/istrasoft/pen/gldEn" rel="nofollow">See fiddle here</a></p>