title: Remove white space above and below large text in an inline-block element
body: <p>Say I have a single <code>span</code> element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.</p>
  
  <p>HTML:</p>
  
  <p>CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>span {
    display: inline-block;
    font-size: 50px;
    background-color: green;
  }
  
  ​</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;BIG TEXT&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Looking at the box model, it's clear the browser is adding padding <em>inside the content edge</em>. I need to remove this "padding", one way is to simply alter the line-height, as with:</p>
  
  <p><a href="http://jsfiddle.net/7vNpJ/1/" rel="noreferrer">http://jsfiddle.net/7vNpJ/1/</a></p>
  
  <p>This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).</p>
  
  <p>Any idea of a cross-browser solution? Thanks!</p>