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

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;
}

看这里:http://jsfiddle.net/pJCBv/

我试图将文本与父 div 的顶部对齐。 line-height: 1; 在字体上方和下方添加 1-2 像素，这就是我尝试 line-height: 0; 的原因。但是文本会从父 div 中突出来吗？如果我能让它与顶部齐平(中间没有间距)，那就太完美了。

另一个问题:浏览器呈现的字体略有不同，但所有浏览器的像素高度是否一致？例如，高度为 11 像素的 Arial 在所有浏览器中是否保证为 11 像素高？如果是这种情况，那么我可以将行高设置为 11px。

Answer 1

在我看来，使用 line-height: 0 不是一个好主意，因为它将文本行的高度设置为空。

我会为此使用绝对定位，只需调整上边距以定位文本:

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)