在CSS并没有为我们提供一个直接设置行间距的方式
我们只能通过设置行高来间接的设置行间距,行高越大行间距越大
使用line-height来设置行高
行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,
网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示
行间距 = 行高 - 字体大小
通过设置line-height可以间接的设置行高,
可以接收的值:
- 直接就设置一个大小
- 可以指定一个百分数,则会相对于字体去计算行高
- 可以直接传一个数值,则行高会设置字体大小相应的倍数
1.直接设置一个大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
font-size: 20px;
line-height: 43px;
}
</style>
</head>
<body>
<p class="p1">
枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。
</p>
</body>
</html>
预览效果:
image.png2.设置百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
font-size: 20px;
line-height: 200%;
/*line-height: 2;*/
}
</style>
</head>
<body>
<p class="p1">
枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。
</p>
</body>
</html>
预览效果:
image.png3.设置数值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
font-size: 20px;
/*line-height: 200%;*/
line-height: 2;
}
</style>
</head>
<body>
<p class="p1">
枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。
</p>
</body>
</html>
预览效果:
image.png使用行高来设置垂直居中
对于单行文本来说,可以将行高设置为和父元素的高度一致,
这样可以是单行文本在父元素中垂直居中
预览效果:
image.png
可以通过font简写,来设置一个行高
在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简写行高设置</title>
<style type="text/css">
.p2{
/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
*/
font: 12px/40px "微软雅黑";
}
</style>
</head>
<body>
<p class="p2">
猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
</body>
</html>
网友评论