line-height详解
要说line-height就必须要知道这几个概念了： 顶线、中线、基线、底线。 这也就是在vertical-align中可能用到的top,middle,baseline和bottom属性了。那么究竟是什么呢？
撒玛利亚人 写的非常好，大家可以学习。
这里，由上到下即为 顶线， 中线，基线和底线，其中基线是第三个。
而什么是所谓的行高line-height呢？
定义是行高为两行中基线的距离，其实我们也可以理解为任意两个相对的线的距离。 而第一行中的基线和下面一行中的顶线就是行距。那么显然半行距就是中间灰色区域的一半了。
font-size 即为字体的高度，即字体所占的真正的高度，即深灰色的部分。
什么使内容区呢？
内容区就是图中深灰色的部分，即底线和顶线所包裹的区域。
什么是行内框呢？
每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）
行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
好了，那什么是line-height呢？
定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
值得注意的是：一个行内元素如span不是被其中的文字撑开的，而是由其中的line-height撑开的，看下面的这个例子：
<!DOCTYPE html>
<html>
<head>
<title>for test</title>
<style>
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:blue;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:red;}
</style>
</head>
<body>
<div class="test1">test1内容，背景为蓝</div>
<div class="test2">test2内容，背景为红</div>
</body>
</html>
效果如下所示：
可以看到，test1虽然设置了字体大小，但是却没有吧Line-height的span撑起来。
而虽然test的font-size为0，但是因为设定了行高，所以被撑起来了。
line-height可能的值如下所示；
即默认为normal我们一般都不设定。
而line-height也可以设置为数字，他表示是与字体尺寸相乘来设置行间距。length即设置固定的行间距。
应用；
１.对于ｐ等，设置height和line-height相等，这样文字就居中了 。
2.对于div中的img，可以给div设置height和line-height相等，然后给img设置vertical-align:middle;即可实现。