行高

行高

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

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

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

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

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