行高

时间:2024-03-22 22:04:55

行高

  在之前我们有提到这个属性line-height,该属性用来设置行高,并且我们用它来设置过行间距。为了明白行高指的是什么之间的距离,我们需要明白下面这个图

行高

  一个文本内容被四条线划分,而行高指的就是基线与基线之间的距离,当不设置行高时,行高的大小为字体的大小,所以行与行之间是紧贴着的。

行高

  在导航栏练习中,为了使文字能够垂直居中对齐,我们让line-height的大小等于盒子的大小,为了解释这一现象,我们先看一下盒子的组成

行高

由图可以看出,盒子的高度由上距离,下距离和文本内容的高度组成,上距离的大小为(行高-内容高度)/2,下距离的高度=盒子高度-上距离的高度-内容高度。当文本垂直居中显示时,上距离的高度等于下距离的高度,这时上距离的高度=(盒子高度-内容高度)/2,对比于上距离高度的公式,得到此时行高等于盒子的高度。

  所以这就解释了为什么当行高等于盒子高度时,文字会垂直水平居中,当行高增大时,上距离的高度增大,文字会向下移动。