css的行高

行高line-heigt是真实存在的，那么行高又表示什么呢？

先来看一段代码

这里我们设置了p的行高我40px，来看一下运行的结果：

再来对比此时div的盒模型

我们可以看到这里div有了高度202，我们并没有设置div的高度，那这里为什么div的就有高度了呢？

这实际上就是有line-height: 40px;导致的，由运行结果可以看到是5行，height=5*40+1*2=202；行高其实就是盒子的高度，在这里就是p的高度。

如果这里我们设置了字体的大小：font-size: 14px;那么默认字体就是居中，上下距离值各位5px，所以为了保证字能在行高中居中，一般行高和字号都设置为偶数。

对于单行文本，为了让字体垂直居中，设置行高和高度大小一致。但是对于多行文本的垂直居中，是不能用行高来实现的，而是用padding来实现的。

运行结果：

来看一下是如何设置的，首先盒子的高度是60px，这里有2行字体，字体大小为16px，那么还有60-16*2=28，28/2=14,那么这里就设置padding-top的值为14px。之后我们需要修改盒子的高度height的值为46px,要明白这里不再是60px。这就是通过设置padding-top值来实现多行文本居中。