line-height

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
                            

参数：

/* 关键字 */
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;