前端学习--Css--⾏间距
在CSS并没有为我们提供⼀个直接设置⾏间距的⽅式，我们只能通过设置⾏⾼来间接的设置⾏间距，⾏⾼越⼤⾏间距越⼤。
使⽤line-height来设置⾏⾼。
⾏⾼类似于我们上学单线本，单线本是⼀⾏⼀⾏，线与线之间的距离就是⾏⾼，⽹页中的⽂字实际上也是写在⼀个看不见的线中的，⽽⽂字会默认在⾏⾼中垂直居中显⽰。
⾏间距 = ⾏⾼ - 字体⼤⼩。
通过设置line-height可以间接的设置⾏⾼，可以接收的值：
1.直接就收⼀个⼤⼩；
2.可以指定⼀个百分数，则会相对于字体去计算⾏⾼；
3.可以直接传⼀个数值，则⾏⾼会设置字体⼤⼩相应的倍数。
对于单⾏⽂本来说，可以将⾏⾼设置为和⽗元素的⾼度⼀致，这样可以是单⾏⽂本在⽗元素中垂直居中。
在font中也可以指定⾏⾼在字体⼤⼩后可以添加/⾏⾼，来指定⾏⾼，该值是可选的，如果不指定则会使⽤默认值。
⽰例demo:
<!DOCTYPE html>
<html>
css设置文字垂直居中
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**
* line-height如果是证书，值越⼤，间距越⼤
*/
.p1 {
font-size: 35px;
line-height: 2;
}
.box {
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 设置“我是⼀个超链”接居中对齐
*/
line-height: 200px;
}
.p2 {
/*font: 30px "微软雅⿊";
line-height: 50px;*/
font:30px/50px "微软雅⿊";
}
</style>
</head>
<body>
<p class="p2">
⼈⽣若只如初见，何事秋风悲画扇。等闲变却故⼈⼼，却道故⼈⼼易变。(⼀作：却道故⼼⼈易变) 骊⼭语罢清宵半，泪⾬霖铃终不怨。(⼀作：泪⾬零 / 夜⾬霖) 何如薄幸锦⾐郎，⽐翼连枝当⽇愿。
</p>
<div class="box">
<a href="#">我是⼀个超链接</a>
</div>
<p class="p1">
⼈⽣若只如初见，何事秋风悲画扇。等闲变却故⼈⼼，却道故⼈⼼易变。(⼀作：却道故⼼⼈易变) 骊⼭语罢清宵半，泪⾬霖铃终不怨。(⼀作：泪⾬零 / 夜⾬霖) 何如薄幸锦⾐郎，⽐翼连枝当⽇愿。
</p>
</body>
</html>
结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。