line-height的底线、基线、中线、顶线

说明：粉色为顶线，蓝色为中线（和英语本有点差异），绿色为基线，红色为底线

1.vertical-align:top

2.vertical-align:middle

3.vertical-align:baseline

4.vertical-align:bottom

结论：顶线和底线是相对于中线来计算的，当line-height为0时，顶线和底线将重合，而中线是相对于基线来计算的，基线始终在中线的下方（x的底部），vertical-algin：middle并不是对其到中线而是对齐到基线以上1/2x的位置。