如何测量CSS线高？

Question

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

请参阅示例图片：

Answer 1

Form MDN：

  

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

     

在未替换的内联元素上，line-height指定高度   用于计算线框高度。

正如您在 DEMO 和下面的图片中看到的那样。这意味着对于文字，line-height定义了围绕该框内垂直居中的字母的框的高度，因此第一个示例是正确的。

来自www.w3.org的图片

Answer 2

正如我已经评论过的那样，第一个例子是line-height实际上的行为。

据我所知image is wrong，图片中的line-height从基线到基线进行计数，其中line-height在两侧垂直计算，计算得出将数字乘以元素font-size。

例如，我已经创建了一个样本

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

Demo

在上面的示例中，line-height的行为类似于padding-top和padding-bottom属性（它不是真正的填充）而且＆＃39 ;它是如何运作的。

Answer 3

找到此图片，因此这是您的第一个示例line-height

Answer 4

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

CSS

div {
    width:120px;
    height:30px;
    border:1px solid black;
    margin-bottom:5px;
}
#box2 {
    line-height:30px;
}
#box3 {
    line-height:10px;
}
#box4 {
    line-height:60px;
}

HTML

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

小提琴：

http://jsfiddle.net/58CJw/

行高似乎是fontSize + spaceAbove + spaceBelow，其中spaceAbove = spaceBelow。

Answer 5

line-height property粗略地说明了线框的最小高度;确切的效果取决于上下文（见规范）。

无法从图像中看出真正的问题是什么。

Answer 6

线条垂直居中。这就是您可以使用line-height垂直居中一行元素的原因。