行高（lineheight）是CSS中一个非常重要的属性，它影响着文本的可读性和布局的美观性，在CSS教程的第二部分，我们将继续深入探讨行高的计算、继承以及如何避免常见的问题。

在CSS中，行高（lineheight）是一个影响文本可读性和页面美观的重要属性，以下是对行高属性的详细解析：

行高的基本概念

行高指的是文本行的基线间的距离，基线是指一行字横排时下沿的基础线，通常对应英文字母x的下端沿，除了基线外，还有顶线（Top line）、中线（Middle line）和底线（Bottom line），这些线共同确定了文字行的位置。

行高的语法与取值

行高属性的具体定义如下：

语法：lineheight : normal | <实数> | <长度> | <百分比> | inherit

说明：设置元素中行的高度。

值：

normal：默认行高，一般为1到1.2；

<实数>：实数值，缩放因子；

<长度>：合法的长度值，可为负数；

<百分比>：百分比取值基于元素的字体尺寸；

inherit：从父元素继承lineheight属性的值。

理论上讲，一行中的每个元素都有一个内容区域，它是由字体尺寸决定的，行内元素会生成一个行内框（inline box），行内框只是一个概念，它无法显示出来，但是它又确实存在，在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度，即：将行距的值（行高字体尺寸）除以2，分别增加到内容区域的上下两边。

由于行高可以应用在任何元素上，因此同一行内的若干元素可能有不同的行高和行内框高。

行高的计算与继承

以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸，如果一个段落的字体大小为20px，行高为2em，那么行高就是40px，如果另一个段落的字体大小为30px，行高同样为2em，那么行高就是60px。

行高可以设定得比字体高度小，此时多行的文字将叠加到一起，如果字体大小为20px，行高设定为10px，那么多行的文字将会叠加在一起。

行高是可继承的，但是继承的是计算值，一个元素的行高为2em，字体尺寸为20px，那么计算值为40px，如果这个元素内有一个子元素的字体尺寸为30px，那么子元素继承的行高仍为40px。

避免行高继承造成的问题

由于继承的是计算值，因此当元素内的文字字体尺寸不一样的时候，如果设定固定的行高很可能造成字体的重叠，为了避免这种情况，可以为每个元素单独定义行高，或者定义一个没有单位的实数值作为缩放因子来统一控制行高。

含有图片时的行高表现

中含有图片的时候，如果图片的高度大于行高，则含有图片行的行框将被撑开到图片的高度，但图片虽然撑开了行框，但是不会影响行高，因此也不会影响到基于行高来计算的其他属性。

相关问答FAQs

问题1：如何设置段落的行高为字体大小的1.5倍？

答：可以通过以下CSS代码设置段落的行高为字体大小的1.5倍：

 p {   fontsize: 16px;   lineheight: 1.5; }

这样，段落的行高就会是24px（16px * 1.5）。

问题2：如何避免因行高继承导致的字体重叠问题？

答：为了避免因行高继承导致的字体重叠问题，可以为每个元素单独定义行高，或者定义一个没有单位的实数值作为缩放因子来统一控制行高。

 p {   fontsize: 16px;   lineheight: 1.5; /* 设置缩放因子 */ } p span {   fontsize: 20px;   lineheight: 1.2; /* 单独定义子元素的行高 */ }

通过这种方式，即使子元素的字体尺寸与父元素不同，也可以避免字体重叠的问题。