title: { line-height: 0; } causing text to stick out from parent div?
body: <pre><code>&lt;div&gt;
      &lt;p&gt;Text Text Text&lt;/p&gt;
  &lt;/div&gt;
  
  div { 
      height: 100px;
      width: 500px;
      margin-top: 50px;
      background-color: #00f;
  }
  
  p {
      font-size: 20px;
      color: #000;
      line-height: 0;
  }
  </code></pre>
  
  <p>Look here: <a href="http://jsfiddle.net/pJCBv/" rel="nofollow">http://jsfiddle.net/pJCBv/</a></p>
  
  <p>I'm trying to align text flush against the top of the parent div. <code>line-height: 1;</code> adds 1-2 pixels above and below the font which is why I'm trying <code>line-height: 0;</code>. But then the text sticks out from the parent div? It would be perfect if I could get it flush against the top (with no spacing in between).</p>
  
  <p>Another question: browsers render fonts slightly different, but is the <em>pixel height</em> consistant accross all browsers?  E.g., Will Arial measuring 11px tall be guarenteed to be 11px tall in <strong>all</strong> browsers?  If this is the case then I could just set the line-height equal to 11px.</p>