title: Is there an invisible padding/margin for font-size?
body: <p>I am having a hard time understanding how font-size is working in the following html snippet:</p>
  
  <pre><code>.container {
      padding: 20px;
  }
  
  ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  
  ul li {
      margin: 0;
      padding: 0;
      background: blue;
      height: 50px;
      line-height: 50px;
      color: white;
  }
  
  ul li span {
      border: 1px solid red;
      margin: 0;
      padding: 0;
  }
  
  #test1 li {
      font-size: 48px;
  }
  
  #test2 li {
      font-size: 42px;
  }​
  
  &lt;div class="container"&gt;
      &lt;ul id="test1"&gt;
          &lt;li&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/li&gt;        
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;ul id="test2"&gt;
          &lt;li&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>I want my <code>li</code> element to be exactly 50 pixels tall, and I want the text/span to be centered vertically within it. Everything is vertical, but when I set font-size to 48px with a 2px red border, the border is pushed outside of the li element. It almost seems like there is an invisible padding/margin applied.</p>
  
  <p>Here is a jsfiddle demonstrating the "issue": <a href="http://jsfiddle.net/qtVK3/" rel="noreferrer">http://jsfiddle.net/qtVK3/</a></p>
  
  <p>When I inspect the <code>span</code> element in Chrome, it shows the actual height of the span element is 57px. Where does the extra 7px come from?</p>