看CSS权威指南，觉得有价值的探究，关于行高和垂直对齐
line-height属性是指文本行基线之间的最小距离，而不是字体的大小
首先，基线(baseline)指的是英文四线格的倒数第二条线。
其次，关于font-size，字体大小受font-size形成的em框限制。
最后，在line-height设定时，由line-height决定基线间最小距离。
关于上图
A line box containing some text and elements.
一行文字被放在一个line box里，而line box又由一个或多个inline box(行内框)组成，上图有5个inline box。
inline box中的文本内容组成了content area(虚线框所示)，content area的大小跟文字大小有关，而决定文字大小的是font-size，因此font-size作用于content area。在未设置line-height的情况下，inline box的高度由content area决定。
而line-height则是作用于inline box高度，line-height为20px;font-size为16px;的情况下，会在content area的上下设定2px的间隔。这样上下两行基线间距离也就增加了4px
line box的高度由inline boxs中最高的那一个决定。
height设定的是容器的高度，并非line box高度，如果容器高度正好与line box高度相等，那么行文本就在容器内垂直居中了。
line-height例子
vertical-align
作用于:行内元素和表单元格
默认值：baseline
baseline: 一个元素的基线与其父元素的基线对齐。如果元素没有基线，比如这是一个图像或表单输入元素，或者是其他替换元素??那么该元素的底端与其父元素的基线对齐。
bottom: 将元素行内框的底端与行框的底端对齐
text-bottom: text-bottom是指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值。要对齐的元素的行内框底端再与父元素content area的底端对齐。
middle: 往往（但并不总是）应用于图像。middle往往将元素的垂直中点与父元素基线上方0.25em处的一个点对齐。
百分数: 把元素的基线（或替换元素的底边）相对于父元素的基线升高或降低指定的量（你指定的百分数要计算为该元素line-height的百分数，而不是相对于其父元素的line-height）。
<div style="font-size: 14px; line-height: 18px;">I felt that, if nothing else, I deserved a<span styles="vertical-align: 50%;">raise</span>for my efforts.</div>span的基线身高9px，继承自父元素的line-height×50%
