title: Varying line-height and font-size causing gaps in inline-block elements
body: <p>I'm putting a simple navigation bar together. Initially I just wanted all of the links to be centered vertically, so I used the following CSS, which did what I needed:</p>
  
  <pre><code>.link {
      display: inline-block;
      line-height: 3em;
      height: 3em;
  }
  </code></pre>
  
  <p>I then wanted some of my links to be in a larger font size. I did this by setting the line-height and font-size property differently on each element, however I made sure that the line height would be calculated as 3em respective to the parent:</p>
  
  <pre><code>.link1 {
      display: inline-block;
      font-size: 1.5em;
      line-height: 2em;
  }
  .link2 {
      display: inline-block;
      font-size: 2em;
      line-height: 1.5em;
  }
  </code></pre>
  
  <p>In doing this, I noticed that there were small bands above and below the elements where the elements were being vertically offset slightly.</p>
  
  <p>I've created a JSFiddle <a href="http://jsfiddle.net/z11k8fdo/3/" rel="nofollow">here</a> to demonstrate the issue. I suspect that I could hack around this issue with a float: left and a clearfix, but I would like to hear the 'correct' way to solve it.</p>
  
  <p>To summarise, all I'm trying to achieve here is divs with the same height but different font sizes, and with the text vertically centered.</p>
  
  <p>Thanks very much for your help.</p>