CSS中line-height属性详解

基本概念

line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。

图中两行基线之间的距离就是行高，基线相关可以查看CSS属性vertical-align详解（CSS之五） (opens new window)。上一行的底线和下一行的底线之间的距离就是行距。 行距 = line-height - font-size

取值

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

1. line-height:normal 是默认值，与元素字体关联，同时在不同的浏览器之家也有区别。 图中可见，不同的字体，normal的取值是不确定的，所以一般在开发时会会重置line-height样式。
2. 之间的区别如下：

设置方式	line-height	计算后的line-height	子元素(font-size: 30px)继承的line-height
normal	默认。不同浏览器，不同字体都会有所区别	-	-
number	line-height:1.2	自身 font-size(16px) * 1.2 = 19.2px	继承1.2，line-height = 自身font-size(30px)*1.2=36px
%	line-height:120%	自身 font-size(16px) * 120% = 19.2px	继承父元素计算后得到的line-height: 19px,而不是 120%
length	line-height: 20px	不用计算	line-height: 20px
inherit	父元素的line-height	不同计算	父元素的line-height值

参考

CSS中的line-height行高属性详解 (opens new window)

CSS深入理解之line-height (opens new window)