line-height（行高）
Posted goodgirl----xiaomei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了line-height（行高）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postion</title>
<style>
/*
在css并没有为我们提供一个直接行间距的方式
我们只能通过设置行高来间接设置行间距,行高越大行间距越大
我们使用line-height来设置行高
行高类似于我们上学的单线本，单线本是一行一行，线与线之间距离行高
网页中的文字实际上也是一个看不见的线中，而文字会默认在行高中垂直居中显示
行间距=行高-字体大小
*/
.p1{
font-size: 20px;
line-height: 70px;
/*
* 通过设置line-height可以间接的设置行高
* 可接受的值：
* 1.直接就收一个大小
* 2.可以指定一个百分数，则相对于字体大小去计算行间距=字体大小是20px*行高200%
* 3.可以直接传一个数值,则行高设置字体大小相应的倍数=字体大小*1.5
* */
/*line-height: 50px;*/
/*line-height: 200%;*/
/*line-height: 1.5;*/
}
.div01{
width: 200px;
height: 200px;
background: blueviolet;
/*
*对于单行文本来说，可以将行高设置为和父元素的高度一致
* 这样可以是单行文本在父元素中垂直居中
* */
line-height: 200px;
}
.p2{
/*
*在font中也可以指定行高
* 在字体后可以添加/行高，该值是可选的，如果不指定，则会使用默认值
* 警告：默认值
* line-height：50px;
* font: 20px "微软雅黑";
* 虽然，前面的行高设置了20px,但是font里面的行高未设置，指定默认值会将其覆盖
* font----里面有很多默认值
*/
font: 20px/50px "微软雅黑";
}
</style>
</head>
<body>
<p class="p2">
在css并没有为我们提供一个直接行间距的方式
我们只能通过设置行高来间接设置行间距,行高越大行间距越大
我们使用line-height来设置行高
行高类似于我们上学的单线本，单线本是一行一行，线与线之间距离行高
网页中的文字实际上也是一个看不见的线中，而文字会默认在行高中垂直居中显示
行间距=行高-字体大小
</p>
<div class="div01">
<a href="#">我是一个超链接</a>
</div>
<p class="p1">
在css并没有为我们提供一个直接行间距的方式
我们只能通过设置行高来间接设置行间距,行高越大行间距越大
我们使用line-height来设置行高
行高类似于我们上学的单线本，单线本是一行一行，线与线之间距离行高
网页中的文字实际上也是一个看不见的线中，而文字会默认在行高中垂直居中显示
行间距=行高-字体大小
</p>
</body>
</html>
以上是关于line-height（行高）的主要内容，如果未能解决你的问题，请参考以下文章
html的一个div中左边是lable右边是文本框，怎么让lable上下居中
line-height 和 vertical-align 行高与行对齐精解 （图文）转文