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

Question

<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.

Answer 1

In my opinion using line-height: 0 is not a good idea, because it set the height of the line of text as null.
I would use absolute positioning for that matter, just adjust the top margin to position the text:
div {
position: relative;
height: 100px;
width: 500px;
margin-top: 50px;
background-color: #00f;
}
p {
font-size: 20px;
color: #000;
position: absolute;
margin-top: -4px
}
(jsFiddle)

Answer 2

I agree with Mathieu's answer, but if you must use line-height, do line-height: 0.8;
http://jsfiddle.net/eshellborn/8PRwa/
By the way, line-height isn't the distance from the bottom of the characters to the top, it's the distance from one line of text to the lower line.

Answer 3

If it's ok to make the text inline-block, then setting the line-height to zero, and set margin-top to zero, seems to work perfectly, and for different fonts.
So for the given question, just change the p css to give:
div {
height: 100px;
width: 500px;
margin-top: 50px;
background-color: pink;
}
p {
font-size: 20px;
color: #000;
line-height: 0;
display:inline-block;
margin-top:0em;
}
<div>
<p>TEXT STICKING OUT FROM PARENT DIV</p>
</div>

Answer 4

div {
height: 100px;
width: 500px;
margin: 50px;
background-color: #0f0;
display: flex;
}
p {
font-family: impact;
font-size: 30px;
color: #000;
line-height: 0;
margin-top: calc(30px/2.5);
padding: 0;
display: block;
}
<div>
<p>TEXT STICKING OUT FROM PARENT DIV</p>
</div>
Change div display to flex:
div {
height: 100px;
width: 500px;
margin: 50px;
background-color: #00f;
display:flex;
/*justify-content:center;
align-items:center;*/
}
p {
font-size: 20px;
color: #000;
line-height: 0;
}
<div>
<p>TEXT STICKING OUT FROM PARENT DIV</p>
</div>