文字的行高

坑军之王

2021-12-10

201

在实习过程中，随着对布局的使用，发现就文字而言，其高度很难搞，因为文字的高度带有一部分空白的区域，导致高度方面布局很难搞，常常会超出预定的高度之后才发现布局有问题。虽然元素的高度一般情况下不去进行设定，但有一份特殊的元素的高度是必须确定的。故再次对文字的高度进行一定的讨论。

在明确行高的概念前，首先需要对四条线的概念有一个确认：

顶线、中线、基线、底线

其中vertical-align属性存在top、middle、baseline、bottom，就是和这四条线相关。

有一点需要注意的是：最下面的是底线而不是基线。

行高是指上下文本的基线之间的距离，即两条红线之间的距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行紫线和第二行绿线间的垂直距离。

针对文字而言，有三个区域：

内容区：顶线和底线之间的距离

行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边

行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

上述概念搞清楚之后就该对行高进行说明了：

定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

值	说明
normal	默认,设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

故在使用对单行文本的时候，如果对文字的排版有严格的需求的时候：在某个固定的元素内设定文字的大小，一定要将行高设置成与文字的大小（font-size）一样的数值，以防行框额外占据空间。