line-height
所有浏览器都支持 line-height 属性。
1. 定义和用法
line-height 属性设置行间的距离（行高）。不允许使用负值。
2. 说明
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
3. 取值
normal：默认。设置合理的行间距。
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length：设置固定的行间距。
% ：基于当前字体尺寸的百分比行间距。
inherit：规定应该从父元素继承 line-height 属性的值。
行高还有一个特性，叫做垂直居中性。当块级元素中只有单行文字，我们可以使用line-height等于元素高度来使文字垂直居中。
1 <style> 2 .single_line { 3 padding-left: 5px; 4 margin-top: 10px; 5 margin-bottom: 20px; 6 line-height: 30px; 7 border: 1px dashed #cccccc; 8 } 9 </style> 10 11 <p class="single-line"> 12 这是高度为30像素的单行文字 13 </p>
顺便提一下多行文字的垂直居中：要实现高度不固定的文字垂直居中使用padding就可以。而对于高度固定的div，里面文字单行或多行显示，且字体有大有小，其中一种方法就是使用line-height。
1 <style> 2 i { 3 font-style: normal; 4 } 5 .multi-line { 6 margin-top: 10px; 7 padding-left: 5px; 8 line-height: 150px; 9 border: 1px dashed #cccccc; 10 font-size: 0; 11 } 12 .multi-line span { 13 display: inline-block; 14 line-height: 1.4em; 15 vertical-align: middle; 16 } 17 .inline-block { 18 display: inline-block; 19 } 20 .vm { 21 vertical-align: middle; 22 } 23 </style> 24 25 <p class="multi-line"> 26 <span style="font-size:12px;">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br>这里是第二行，用来测试多行的显示效果。</span> 27 <i class="vm inline-block"> </i> 28 </p> 29 <p class="multi-line"> 30 <span style="font-size:20px;">这里是高度为150像素的标签内的多行文字，文字大小为20像素。<br>这里是第二行，用来测试多行的显示效果。</span> 31 <i class="vm inline-block"> </i> 32 </p>
4. line-height百分比：
line-height百分比在面试中可能经常问到。例如你知道line-height:120%和line-height:1.2的区别吗？
下面就说一下行高带单位和不带单位的区别，例如下面的例子：
line-height:26px; 表示行高为26个像素
line-heigth:120%;表示行高为当前字体大小的120%
line-height:2.6em; 表示行高为当前字体大小的2.6倍
带单位的行高都有继承性，其子元素继承的是计算值，如父元素的字体大小为14px，定义行高line-height:2em;则计算值为 28px，不会因其子元素改变字体尺寸而改变行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素虽然字体是12，行高还是父元素的行高)
line-height:2.6;表示行高为当前字体大小的2.6倍
不带单位的行高是直接继承，而不是计算值，如父元素字体尺寸为14px，行高line-height:2;他的行高为28px;子元素尺寸为12px，不需要再定义行高，他默认的行高为24px。（例如：子元素12px，他的行高是24,不会继承父元素的28）