行高line-heigt是真实存在的，那么行高又表示什么呢？
先来看一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
/*文字一行撑出高度40，7行就是280*/
width: 400px;
line-height: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高行高</p>
</body>
</html>
这里我们设置了p的行高我40px，来看一下运行的结果：
再来对比此时div的盒模型
我们可以看到这里div有了高度202，我们并没有设置div的高度，那这里为什么div的就有高度了呢？
这实际上就是有line-height: 40px;导致的，由运行结果可以看到是5行，height=5*40+1*2=202；行高其实就是盒子的高度，在这里就是p的高度。
如果这里我们设置了字体的大小：font-size: 14px;那么默认字体就是居中，上下距离值各位5px，所以为了保证字能在行高中居中，一般行高和字号都设置为偶数。
对于单行文本，为了让字体垂直居中，设置行高和高度大小一致。但是对于多行文本的垂直居中，是不能用行高来实现的，而是用padding来实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 400px;
height: 46px;
border: 1px solid red;
font-size: 16px;
padding-top: 14px;
}
</style>
</head>
<body>
<p>行高行高行高行高行高行高行高行高行高行行高行高行高行高行高行高行高行高行高行</p>
</body>
</html>
运行结果：
来看一下是如何设置的，首先盒子的高度是60px，这里有2行字体，字体大小为16px，那么还有60-16*2=28，28/2=14,那么这里就设置padding-top的值为14px。之后我们需要修改盒子的高度height的值为46px,要明白这里不再是60px。这就是通过设置padding-top值来实现多行文本居中。
扫一扫
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
