CSS线条高度是如何测量的？

CSS中的行距是否从文本的底部到下一行文本的底部？或者文本是垂直居中的行内

请参见示例图像：

---

找到了此图像，因此这是您的第一个示例，即

行高

粗略地说，指定线框的最小高度；具体效果取决于上下文（请参见规范）

---

从图像上无法分辨出真正的问题是什么。

这条线垂直居中。这就是为什么您可以使用

行高

将一行元素垂直居中。

正如我已经评论过的，第一个示例是

行高

的实际行为

根据我的说法，图像中的

行高

是从一个基线到另一个基线进行计算的，而

行高

是在垂直两侧进行计算的，其计算方法是将数字乘以元素

字体大小

例如，我创建了一个示例

div {
    outline: 1px solid #f00;
    line-height: 40px;
}

在上面的示例中，

行高

的作用类似于

padding top

和

padding bottom

属性（它实际上不是一个padding），这就是它的工作原理。

：

在块级元素上，行高CSS属性指定 元素中线框的最小高度

在未替换的内联图元上，线条高度指定 用于计算线框高度

正如您在本和下图中所看到的。这意味着对于文本，

行高

定义了围绕该框内垂直居中的字母的框的高度，因此第一个示例是正确的。

---

图片来源

对我来说，这似乎是图片中显示的第一个示例。让我们看看这个代码：

CSS HTML

无行高
30px线高
10px线高
60px线高

在这里拉小提琴：

---

实际上，行高似乎是

fontSize+spaceover+spacedown

，其中

spaceover

=

spacedown

来自W3文档：

在内容由内联级元素组成的块容器元素上，“行高”指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框从一个具有元素字体和行高属性的零宽度内联框开始一样。我们把那个假想的盒子称为“支柱”。（这个名字的灵感来源于TeX）。

第一个例子是

线条高度的行为，就像Left image是正确的；）你经常会看到人们通过将行高设置为与div相同的高度，使用行高来垂直对齐div内的单行文本。以后，请不要交叉张贴问题。找到最合适的站点并坚持使用该站点。我将把你的两个问题合并在这里，以整合答案。在你的图片中，它显示了从第一行字母底部到第二行字母底部的线条高度，因此看起来更像OP中的第二个示例image@web-第二个例子是BaselineDam，我现在弄糊涂了！我必须再看一次OP的照片。是的，照片是confusing@Mr.Alien-我认为web tiki可能是对的，从基线到基线是
行高
？对不起-tihs是重复的帖子。这是我的第一篇帖子：
div {
    width:120px;
    height:30px;
    border:1px solid black;
    margin-bottom:5px;
}
#box2 {
    line-height:30px;
}
#box3 {
    line-height:10px;
}
#box4 {
    line-height:60px;
}

<div id="box1">No line-height</div>
<div id="box2">30px line-height</div>
<div id="box3">10px line-height</div>
<div id="box4">60px line-height</div>