line-height 和 vertical-align 行高与行对齐精解 (图文)

2020-05-16 06:43:31易采站长站整理

7.3 line-height

行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响。

7.3.1 语 法

line-height属性的具体定义列表如下:

语法: line-height : normal | <实数> | <长度> | <百分比> | inherit
说明: 设置元素中行的高度。
值: normal:默认行高,一般为1到1.2; 实数:实数值,缩放因子; 长度:合法的长度值,可为负数; 百分比:百分比取值基于元素的字体尺寸。
初始值: normal
继承性: 继承
适用于: 所有元素
媒体: 视觉
计算值: 长度和百分比值为绝对值;其他同指定值。

行高指的是文本行的基线间的距离。而基线(Base line),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下 端沿,同时还有文字的顶线(Top line)、中线(Middle line)和底线(Bottom line),用以确定文字行的位置,如图7-17 所示。

clip_image001
图7-17 文字的基线

行高与字体尺寸的差称为行距(leading), 如图7-18所示。

clip_image002
图7-18 行高与行距

7.3.2 内 容区域、行内框和行框

理论上讲,一行中的每个元素都有一个内容区域,它是由字体尺寸决定的,如图 7-19所示。

clip_image003
图7-19 内容区域

行内元素会生成一个行内框(inline box),行内框只是一个概念,它无法显示出来,但是它又确实存在。在没有其他因素影响的时候,行内框等于内容区域,而设定行高则可以增加或者减少行内框 的高度,即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边,如图7-20所示。

clip_image004
图7-20 行内框与行高

由于行高可以应用在任何元素上,因此同一行内的若干元素可能有不同的行高和行内 框高,例如有如下代码,其显示如图7-21所示。

<p style=”line-height:20px;”>行高20px。<strong style=”line-height:50px;”> 行高50px。</strong><span style=”line-height:30px;”>行高30px。</span></p>

clip_image005