Css {行高：0；}导致文本从父div突出？

文本文本文本

div{ 高度：100px； 宽度：500px； 边缘顶部：50px； 背景色：#00f； } p{ 字体大小：20px； 颜色：#000； 线高：0； } 看这里：

我正在尝试将文本对齐到父分区的顶部。

行高：1在字体的上方和下方添加1-2个像素，这就是为什么我尝试
行高：0。但是文本会从父div中突出出来吗？如果我能让它与顶部齐平（中间没有间隔），那就太完美了

另一个问题：浏览器呈现的字体略有不同，但像素高度在所有浏览器中都是一致的吗？例如，在所有浏览器中，11px高的Arial测量值是否保证为11px高？如果是这种情况，那么我可以将行高设置为11px。
在我看来，使用
行高：0
不是一个好主意，因为它将文本行的高度设置为空

我会使用绝对定位，只需调整顶部边距来定位文本：

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

我同意马修的回答，但如果必须使用线条高度，请使用
线条高度：0.8


顺便说一下，行高不是从字符底部到顶部的距离，而是从一行文本到下一行的距离
 如果可以创建文本内联块，那么将行高设置为零，将页边距顶部设置为零，对于不同的字体，似乎效果很好。
对于给定的问题，只需将p css更改为：


div{
高度：100px；
宽度：500px；
边缘顶部：50px；
背景颜色：粉红色；
}
p{
字体大小：20px；
颜色：#000；
线高：0；
显示：内联块；
页边顶部：0em；
}

从父DIV突出的文本


div{
高度：100px；
宽度：500px；
利润率：50像素；
背景色：#0f0；
显示器：flex；
}
p{
字体系列：影响；
字体大小：30px；
颜色：#000；
线高：0；
边缘顶部：计算（30px/2.5）；
填充：0；
显示：块；
}

从父DIV突出的文本

像这样的吗？请尝试为您的p标记使用下面的sytle，但由于每个浏览器呈现的字体略有不同，因此没有完善的解决方案。p{字体大小：20px；颜色：#000；边距：0；填充：0；位置：相对；顶部：-3px；}如果我可以设置行高：0；不要让文字从顶部突出，这样可以解决所有问题。有什么技巧可以做到这一点吗？我一开始尝试了负边距，但根据浏览器的不同，线条高度会有1-2个像素的细微差别，所以并不总是精确的。另一个问题是备用字体可能大小不同，因此在这种情况下，字体不会始终与顶部齐平。
div { 
    position: relative;
    height: 100px;
    width: 500px;
    margin-top: 50px;
    background-color: #00f;
}

p {
    font-size: 20px;
    color: #000;
    position: absolute;
    margin-top: -4px
}