line-height 属性用来定义行间的距离(行高)，该属性会影响行框的布局。
在应用到一个块级元素时，它定义了每行的高度，主要是在为了在每行之间添加空白距离来提高可读性。
line-height 与 font-size 的计算值之差，也就是行间距，会被分为两半，分别加到一个文本行内容的顶部和底部。
上图中，虚线框部分代表行高，浅灰色框部分代表字体高度，深灰色部分代表字符“x”的高度。基线(baseline)和字符x的底部平齐，而中间线(middle)和字符x的中心点平齐。
line-height 属性可以使用如下类型的值：
px
em
%
无单位数字，比如 1.5
无单位数字和百分比类似，1.5 和百分比 150% 相同。前者写法要简洁些。
行高的重要性
和Photoshop/Word软件中的行距(line-spacing)一样，line-height 是为了在每行文本之间添加间距，以提高文本段落的可读性。
由于可读性依赖于文本的大小，所以推荐使用动态的相对尺寸来定义行高。而px 定义了静态的绝对值，一般情况下并不合适。
px 适用于某些特定场合，比如想实现和字体大小无关的文本对齐。
body{ font-size: 16px; line-height: 1.5;}
上例中，行高计算结果为：16 * 1.5 = 24px。
行高的继承性
line-height 属性是可以被继承的，从层叠的元素里传递下来。但是继承规则有点复杂。
如果使用的是像素px，那么子元素行高继承静态值不变。
如果使用的是百分比120%，那么子元素将继承计算后的高度，而和子元素的字体大小(font-size)无关，所以实际上对于子元素而言继承的也还是静态值。
如果使用的是无单位数字或者normal(约等于无单位数字1.2)，那么子元素将先继承计算前的相对值，然后按照子元素font-size来计算高度。这种情况继承的是动态值。
你可以用下面的例子在线测试(点击“Edit on Techbrood”，然后在CSS面板中修改代码)，直观感受不同方式之间的区别：
一般而言，我们会发现：
使用像素(绝对值)会使得标题太紧，小字体文本太松(如上例“Result”标签中所示)。因为标题字体一般比较大，行间距小的话，上下行就会挤在一起(甚至产生覆盖)；
使用百分比也和像素差不多，比如父元素字体为16px，行高120%，那么子元素实际继承的行高总是16*1.2=19.2px(约为20px)，而和子元素的字体大小无关；
使用无单位数字，如果数值较大(如1.5)，子元素继承到的也是相对数字1.5然后再乘以自己的字体大小(也就是和子元素字体大小相关)，那么假定标题字体为30px，行高计算为30px*1.5=45px，会导致标题太松。
所以实践下来，一个比较好的可读性选择是使用无单位数字来设置行高，并使用如下经验值：
内容文本设置为：1.5
标题文本设置为：1.2
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
