行高定义：line-height属性是指文本行基线之间的距离。
顶线、中线、基线、底线概念
从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
行高就是上图中两条红线间的距离
em框、内容区、行内框、行框
em框：em框在字体中定义，也称为字符框（charater box）,有font-size定义
内容区：底线和顶线包裹的区域，即由元素中各字符的em框串起来构成的框。
行内框（inline box），这个框通过向内容区增加行间距来描述。对于非替换元素
，元素行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度。因为行间距不应用到替换元素。
行框（line box），这是包含该行中出现的行内框的最高点和最低点的最小框。
div文字垂直居中(多行)
<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
<span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>
This is a test.
</span>
</div>
效果图
元素对行高影响
行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。
<div style="border:dashed 1px #0e0;margin-bottom:30px;">
<span style="font-size:14px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;">
<span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
</div>
行高的继承
如果父元素的line-height有单位（px、%，em）,那么继承的值则是换算后的一个具体的px级别的值,值是根据父元素的font-size值计算。
如果父元素的属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时子元素的line-height会根据本身的font-size值重新计算得到新的line-height 值。