title: How to remove extra space between div border and text when text is set with em?
body: <p>Please see: <a href="http://jsfiddle.net/E8QHb/2/" rel="nofollow">http://jsfiddle.net/E8QHb/2/</a></p>
  
  <p>A simple div with text:</p>
  
  <pre><code>&lt;div class="TL"&gt;Text&lt;/div&gt;
  </code></pre>
  
  <p>And this css:</p>
  
  <pre><code>.TL {
      font-size: 2em;   
      border: 1px solid red;
  }
  </code></pre>
  
  <p>There is no padding or margin at all, yet there is space rendered between the text and the red border. I want the red border to touch the text all the way around <strong>without</strong> using a pixel based height or line-height. </p>
  
  <p>I've tried <code>line-height:auto</code>, <code>line-height:auto</code>, <code>height:auto</code>, <code>display:inline-block</code>, and <code>display:block</code>.</p>
  
  <p>How can this be done?</p>