行高如何影响行内元素的高度？

行内元素中的行高解释

行内元素根据上下文有不同的高度测量值。以下是详细的细分：

内联框的高度

内联框是包含内容和字形半前导的矩形区域。 line-height 决定了该框的高度，大多数情况下与 line-height 值相同。

行框的高度

行框包含一排内联框。如果所有内联框具有相同的行高和垂直对齐方式，则行框的高度也由行高决定。

内联框内容区域的高度

行内框的内容区域是显示文本和其他元素的区域。该区域可能与内联框高度不同，具体取决于用户代理（浏览器）的实现。

大多数浏览器将内容区域高度基于字体系列和字体大小组合中最高的字形。这可能会导致内容区域大于行框高度。

字体大小和内容区域高度

而字体大小（示例中为 15 像素）确定 em-box 高度，但不保证内容区域高度为 15px。这是因为浏览器会根据字体的特性进行调整。

例如，在您的例子中，浏览器计算出“Verdana”字体的内容区域高度为 18px，“sans-serif”字体的内容区域高度为 17px ，即使您将 font-size 设置为 15px。这些值落在字体大小 1.0 到 1.2 倍的“合理”范围内。

背景颜色和行高

背景颜色的高度内联元素不与行高对齐，因为它只延伸到内容区域的高度。这解释了为什么示例中的绿色背景只有 18 像素高，尽管行高为 15 像素。

以上是行高如何影响行内元素的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！