{ line-height: 0; } causing text to stick out from parent div?

{ line-height: 0; } causing text to stick out from parent div?

<div>
<p>Text Text Text</p>
</div>
div {
height: 100px;
width: 500px;
margin-top: 50px;
background-color: #00f;
}
p {
font-size: 20px;
color: #000;
line-height: 0;
}
Look here: http://jsfiddle.net/pJCBv/
I'm trying to align text flush against the top of the parent div.
line-height: 1; adds 1-2 pixels above and below the font which is why I'm
trying line-height: 0;. 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).
Another question: browsers render fonts slightly different, but is the
pixel height consistant accross all browsers? E.g., Will Arial measuring
11px tall be guarenteed to be 11px tall in all browsers? If this is the
case then I could just set the line-height equal to 11px.