Html 指定“字体大小”时字体的大小如何；px“；在CSS中？

我正试图准确地确定在页面上分配的空间方面，

px

对字体大小意味着什么，我得到的结果与我的预期不符

我的印象是，将像素与

字体大小

结合使用意味着排版占用的垂直空间将与指定的值匹配。例如，如果我指定了

font-size:16px

，则应用该规则的文本行的高度将为

16px

。请注意，我并不期望实际的glyph高度为

16px

，但浏览器会分配

16px

来显示glyph

这里有一些代码可以作为参考，这样我就可以解释我期望看到的东西和我实际看到的东西：

。设置样式{
框大小：边框框；
保证金：自动；
宽度：500px；
高度：500px；
边框：5px纯黑；
填充：20px；
字体大小：150px；
字体系列：无衬线；
}

CSS
是
令人惊叹的

您的线条高度不完全是

150px

，因为

线条高度和
文本大小是两个不同的东西。
使用CSS属性
行高
并将其设置为
1em
（这意味着行高将与文本大小相同），您的内容的高度将恰好为
450px


。设置样式{
框大小：边框框；
保证金：自动；
宽度：500px；
高度：500px；
边框：5px纯黑；
填充：20px；
字体大小：150px；
线条高度：1em；/*添加此线条*/
字体系列：无衬线；
}

CSS
是
令人惊叹的
非常确定，如果未指定，浏览器有自己的默认行高，它将使用这些行高来调整字体大小，并增加一些间距。要确保容器的高度与字体大小完全相同，唯一的方法是指定行高。如果有一点框架问题，请给出正确答案。我怀疑最初的问题是XY问题：他们真的希望能够将N条线放入区域，他们认为最好的方法是按像素计算，而实际上最好的方法是调整线高度属性。@GregSchmit问题不是寻找“最佳方法”来完成任务，只问为什么这个特定的方法在远处看起来不是可行的解决方案。@Mr PROGRAMES 150是正确的，因为边框宽度（10px）由于框的大小而包含在元素的高度中property@TylerBurki然后恭喜你：你问了一个重复的问题，这个问题已经被回答了。我宽宏大量地认为你的实际问题并没有通过那个复制品得到解决；这个答案就是你如何按照你描述的方式将文本整齐地放入容器中。我建议接受@Michal的答案，尽管这有点框架挑战（没有回答所问的确切问题）。我怀疑你有XY问题。你真的只想把N行完美地放入一个容器中，但你认为最好的方法是计算像素，然而（在我看来）修改
行高
似乎是最好的解决方案，因为知道不同浏览器如何呈现字体可能是站不住脚的。@ksav如果我认为作者处理的是XY问题是正确的，那么他们想要解决的实际问题就不是链接问题的重复。True。我刚刚读了@Michal的答案，它似乎解释了op最有可能想弄明白的东西。我必须说，边界不是宽度的一部分，因为我记得使用宽度0制作三角形，并将像素宽度设置为边界，因此它将是500-40，而不是500-40-10。这似乎是额外的像素，似乎弹出与UR CSS加上线高度也是一个相交的概念，你也要考虑太多。