CSS之line-height的作用

一、line-height

line-height属性用于设置行间的距离（行高），例如文本。对于块级元素来说，它指定元素中线框的最小高度，对于未被替换的内联元素来说，line-height没有影响，如button或者其他input元素。（原文未提到，对于部分替代元素，line-height依然可以影响元素的样式布局）。

行间距的尺寸分配一般是line-height与font-size的计算值只差氛围两半，分别加到一个文本行内容的顶部和底部，可以包含这些内容（文本+文本顶部+文本底部）的最小框就是行框（line-box）

二、可能有的值

1.normol---默认值，设置合理的行间距（可自动调整行间距）

2.number---设置数字，此数字会与当前的字体尺寸相乘来设置行间距（这个可实现行间距永远等比例适应字体高度）

3.length---设置固定的行间距（将行间距设置为固定尺寸，无法随字体高度变化而变化，单位可以是px，em）

4.%---基于当前字体尺寸的百分比行间距（与字体高度等比例调整行间距）

5.inhert---规定应该从父元素继承line-height属性的值。

备注：行间距自动适应行高的方式，最好用的是采用number数值的方式

三、line-height的作用

首先，设置了line-height的行框line-box，具有的特性：

垂直居中：由定义可知，line-height是通过line-box行框来体现，line-box所包含的内容应为“文本+文本顶部+文本底部”，其中，文本顶部和文本地鼠是line-height与font-size差值得一半，所以，line-box与文本共用中基线，这也就是行高的垂直居中性。

import！

单行文字的垂直居中对齐，将line-height属性设置为所需要的行框高度，即line-height=height

多行文字的垂直居中对齐，若容器高度已知，也可直接通过设置上下padding相等就可以，但是当容器高度未知时，需要借助line-height来实现。需要将行框内的多行文本转化为内联元素，（设置display:inline-height），然后再单独设置内联元素的行间距，整个内联元素就在行框内垂直居中对齐了。

备注：通过line-height设置文本垂直对齐，如果设置元素垂直对齐，需使用vertical-align:middle

四、line-height:1.5 与150%的区别

150%时会根据父元素的字体大小先计算出行高然后再让子元素继承，而1.5是根据子元素的字体大小动态计算出行高值让子元素继承