我自己的理解,在CSS中,行高和字号描述的对象不同。行高描述的是一个盒子的高度,只是这个盒子是用来装文字的。行高和字号没关系,字号是描述文字的高度(也就是文字的大小),但是一般情况下字号都小于行高,因为这样好看。
如下图:粉色、绿色、蓝色所占的高度就是行高。而字体的大小明显是小于行高的。
一些经验:
如果这个文本只有一行(也就是文字只有一行),想要文本居中,让行高等于盒子高,height的值等于line-height的值。
如果是多行文本,想要文本居中,需要设置盒子的上padding.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;}
p{
width:400px; /*原来height的值是300px.*/
height:210px; /*同时让height的值300减少padding-top的值就是210px.*/
line-height:40px;
font-size:16px;
background-color:pink;
padding-top:90px; /*padding-top的值等于盒子(300-40*3)/2=90px*/
border:2px solid blue;
}
</style>
</head>
<body>
<p>国际及国家文字国际及国家文字国际及国家文字国际及国际及国家文字国家文字国际及国家文字国际及国家文字国际及国家文字</p>
</body>
</html>