内联元素和行高

内联元素和行高

这可能会造成混淆，因为在内联格式模型中，高度是不同的。

内联框的高度

的元素会

display: inline

生成一个内联框：

一个 行内框 是一个既行内和其内容参与其含有内嵌格式化的内容。

display

值为的不可替换元素将

inline

生成一个内联框。

并

line-height

确定该盒子]的高度：

内联框的高度将所有字形及其两边的前导部分包围起来，因此正好是“行高”

因此，您的盒子实际上

15px

很高。

线盒高度

还有线框：

在内联格式设置上下文中，框从一个包含块的顶部开始以一个接一个的水平排列。这些框之间应注意水平边距，边框和填充。这些框可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者其中的文本基线可以对齐。包含形成线的框的矩形区域称为
线框 。

线框的高度由“ 线高计算 ”部分中给出的规则确定。

如果一个行框仅包含非替换的行内框与同

line-height

和

vertical-align

，那些规则说，行框的高度由下式给出

line-height

。

因此，就您而言，这也是

15px

。

内联框内容区域的高度

但是，您的浏览器的开发人员工具说

18px

。那是因为那

18px

是内容区域的高度。这也是由绿色背景绘制的内容区域（以及填充）。

请注意，这些

18px

可能会有所不同，因为CSS2.1没有指定算法：

内容区域的高度应基于字体，但是此规范未指定如何。UA可以例如使用字体的em-box或最大升序和降序。（后者将确保在em-box上方或下方具有部分内容的字形仍位于内容区域内，但导致不同字体的大小不同的box；前者将确保作者可以控制相对于’line-height’的背景样式。，但会导致字形在其内容区域之外绘画。）

如果UA实施第一个建议，则内容高度将由

font-size

决定，该高度决定了em-box。这就是您期望的，绿色框

15px

很高。

但是，大多数UA似乎都没有这样做。这意味着高度可能是

font-family

和中

font-size

使用的最高字形的高度。

但是使用

font-size

值

15px

并不意味着最高的字形也将

15px

很高。这取决于字体。这有点类似于

normal

的初始值

line-height

，定义为

告诉用户代理根据元素的字体将使用的值设置为“合理”的值。我们建议使用介于

1.0

到之间的“正常”值

1.2

。

这意味着，如果您使用

font-size: 15px

，则

line-height

在

15px

和之间将是“合理的”

18px

。Firefox认为“
Verdana”字体是最好的

18px

。在“ sans-serif”中，它使用

17px

。