title: Why is the div bigger than the font-size?
body: <p>See <a href="http://jsfiddle.net/6taruf65/1/" rel="noreferrer">http://jsfiddle.net/6taruf65/1/</a></p>
  
  <p>The following html appears as 20 pixels tall in Firefox31 and Chrome36 on Windows7. I expected it to be 16 pixels tall.</p>
  
  <pre><code>&lt;style&gt;
  * { margin: 0; padding: 0; border: 0; overflow: hidden; vertical-align: baseline; }
  &lt;/style&gt;
  &lt;div style="font-size: 16px;"&gt;help 16px&lt;/div&gt;
  </code></pre>
  
  <p>Notice the bottom of the <code>p</code> is cut off when you limit the div's height to 16px. That suggests to me there's unused space above the text. It might be a problem with vertical alignment. But then how would I go about preventing that issue when I want to precisely control the height and alignment of the text?</p>