line-height 用来设置行间的距离（行高），最为人熟悉的是可以用在垂直居中上，非常简单。但是使用时有很多坑，需要注意。p.s通常这些坑会出现在面试题目中:)
基本属性
- normal：默认，设置合理的行间距，浏览器默认值1.0-1.2。
- number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。缩放因子，直接继承，而不是继承计算值。
- length：设置固定具体的行间距。
- %：基于当前字体尺寸的百分比行间距。继承的是计算值，而非属性值。
- inherit：规定应该从父元素继承 line-height.属性的值。（IE不支持）。
注意点
以em、ex和百分比%为单位的行高，其基数是元素本身的字体尺寸。继承的都是计算值，而非属性值。
<div style=“font-size:14px;line-height:150%;”>
123
<p style=“font-size:40px”>456</p>
</div>
字符“456”的行高会与“123”一致为21px,会导致重叠。
为避免上述情况则可以设置采用固定数字（缩放因子）来避免，缩放因子直接继承。
<div style=“font-size:14px;line-height:1.5;”>
123
<p style=“font-size:40px”>456</p>
</div>
字符“456”的行高为60px,“123”的行高为21px。
在垂直居中中的运用
1. 单行文字垂直居中
Line-height值与height高度设为一致即可。适用于列表项，图片按钮项。
2. 多行文字垂直居中
需要注意将vertical-align设为middle才会垂直居中，仅对内联元素有效，块级元素无效。
```
<div style="height:100px;line-height:100px;font-size:0;">
<span style="display:inline-block;font-size:10px;line-height:1.5;vertical-align:middle;">123.<br/>
123
</span>
</div>
```
3. 图文混排时垂直居中
IE6-7使用该方法时，图片无法居中。需要hack，方法如下：
```
<div style=”width: 150px;height: 155px;line-height: 155px;border: 1px solid #000;background: #f00;text-align: center;
”>
<img src="hl_logo.png" alt="" width="95" height="115" style=”vertical-align: middle;”>
<span style=”display: inline-block;”></span>
</div>
```
添加额外的span，将display属性设置为inline-block使其拥有“layout”，可以修复该bug。
最后的最后
为了避免各种继承，最好将line-height属性设置成number数字；
图文混排、多行文字的居中最好采用padding模式解决，具体下次另表。
