CSS line-height 属性用于设置一个元素的行高（行间距）。通俗来说就是控制相邻两行文字之间的垂直距离。

通常我们会使用line-height属性来设置行与行之间的距离。如果一个元素的line-height值大于的值，那么行高和字体大小值之间的差值会被分割为相等的两份，生成两份“半行间距”，它们会分别被放置在文本的上部和下部，这样内联元素就被居中显示了。可以通过vertical-align属性来改变文本的对齐方式。

如果line-height值小于的值，那么文本的内容可能会溢出元素，两行相邻的文本可能会重叠在一起。

line-height属性的值可以是关键字normal。或者是值，或值，或值。

如果line-height属性的值为数据类型值，它通常是无单位的数值。此时行高通过这个无单位值乘以元素的值来得到。通常情况下，这种方法设置line-height的方法是我们首选的方法。使用这种设置行高的方式，在继承情况下不会有异常的情况发生。

例如，如果一个元素的字体大小设置为16像素，而它的line-height设置为120%。那么浏览器计算的行高值为(16px * 120)/100 = 19.2px。如果在该元素中有一个子元素，而子元素的字体大小设置为24像素，行高继承自父元素，那么行高就比字体大小要小，子元素中的文本会重叠在一起。

如果父元素使用无单位的数值作为line-height值，那么子元素继承的是这个无单位的数值，而不是经过计算的行高值。所以以上面的例子为例，父元素的line-height设置为1.2，那么子元素的行高是1.2 * 24px = 28.8px。

所以，建议在使用line-height属性时使用无单位的数值，否则你需要为元素的所有子元素都设置自己的行高。

另外，我们通常会在属性中设置行高。具体请参考属性的介绍。

根据规范规定，当line-height属性应用在的内联元素时，不会有任何效果。（是指外观和尺寸由外部资源定义的元素，如图像<img>，表单元素<button>，<textarea>，<input>和<select>等。其它的元素都是不可替换的元素）。

如果line-height属性应用在不可替换的内联元素（例如<span>）时，它用于指定line box的高度值。

对于块级元素，line-height属性指定元素内部的line box的最小高度。

官方语法

line-height: normal | <number> | <length> | <percentage> | inherit
                            

参数：

• normal：行高值取决于浏览器的用户代理。根据规范，行高值应该根据字体来设置合适的值，值和<number>参数意义相同，且大小在1.0-1.2之间。根据元素的属性，桌面浏览器使用的默认值多数为1.2。
• <number>：无单位的数据类型值。实际行高值等于该值乘以元素的。在级联时，子元素继承的line-height值是这个无单位数值，而不是经过计算后的行高值。数值不允许为负数。
• <length>：使用数据类型来作为值，用于计算line box的高度。
• <percentage>：使用数据类型来作为值。实际行高值等于给定百分比值乘以元素的字体大小。在级联时，子元素继承的line-height值为经过计算后的实际的行高值。百分比值不允许为负数。
• inherit：继承父元素的行高值。

line-height属性的初始值为normal。

应用范围

line-height属性可以应用在所有的元素上。

示例代码

/* 关键字 */
line-height: normal;

/* 无单位值：行高等于这个值乘以字体大小 */ 
line-height: 3.5;

/* <length> 值 */
line-height: 3em;

/* <percentage> 值 */
line-height: 34%;

line-height: inherit;                              
                            

使用属性来设置行高。

font: 16px/1.4 "Microsoft YaHei", sans-serif;                              
                            

浏览器支持

所有的现代浏览器都支持line-height属性，包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。