首页 > 代码库 > CSS中的line-height

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),这时候两行之间就会重叠,如下图所示:

 技术分享

 

CSS中的line-height