CSS中的line-height

基本概念

行高、行距

行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。

注意：倒数第二根才是基线(baseline)，最下面那根是底线(bottom)。

行高（line-height）：图中两条红线之间的距离，
行距(Leading)：上一行的底线和下一行的顶线之间的距离，
font-size：同一行顶线和底线之间的距离，行距的一半是半行距，

半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~

半行距 = （line-height - font-size）/2    ==>    行距 = （line-height - font-size）

当然，半行距也可能为负值（当line-height < font-size），这时候两行之间就会重叠，如下图所示：