行高
在之前我们有提到这个属性line-height
,该属性用来设置行高,并且我们用它来设置过行间距。为了明白行高指的是什么之间的距离,我们需要明白下面这个图
![](https://i-blog.csdnimg.cn/blog_migrate/faccddd285946a79f27ebb33ab426b2f.png)
一个文本内容被四条线划分,而行高指的就是基线与基线之间的距离,当不设置行高时,行高的大小为字体的大小,所以行与行之间是紧贴着的。
![](https://i-blog.csdnimg.cn/blog_migrate/3ddb0ae445ebb0c60130788477ad2ba1.png)
在导航栏练习中,为了使文字能够垂直居中对齐,我们让line-height
的大小等于盒子的大小,为了解释这一现象,我们先看一下盒子的组成
![](https://i-blog.csdnimg.cn/blog_migrate/2959292dbea68ce4137e7e230d77eece.png)
由图可以看出,盒子的高度由上距离,下距离和文本内容的高度组成,上距离的大小为(行高-内容高度)/2,下距离的高度=盒子高度-上距离的高度-内容高度。当文本垂直居中显示时,上距离的高度等于下距离的高度,这时上距离的高度=(盒子高度-内容高度)/2,对比于上距离高度的公式,得到此时行高等于盒子的高度。
所以这就解释了为什么当行高等于盒子高度时,文字会垂直水平居中,当行高增大时,上距离的高度增大,文字会向下移动。