提示:line-height设置行间的距离,文字与行之间距离。
1、语法:
p{
line-height:"26px";
}
理解图:
注意:改行间距是上间距与下间距,中间文字不变,必须跟盒子高度像素一样的属性值。
我们一般26px怎么来的,下面给你讲解构思一下:
代码演示一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置文本的一行间距、但是文字的本身不变、改变上间距和下间距</title>
<style>
p {
line-height: 26px;
/* 这里“line-height”表示文字间距、里面的值26表示是:文字间距是“16px像素”其他就在上间距5px、就是下间距5px */
text-indent: 2em;
}
</style>
</head>
<body>
<p>随着时代从20世纪进入21世纪,科技的飞速发展——如以前的黑白电视机变成了彩电又变成了现在的网络电视;又如从普通电话变成普通无线电话又变成现在的互联网多媒体平板手机电话……,这也使我们进入了碎片化生活,什么是碎片化生活呢?顾名思义,是指我们生活中的种种原先完整的计划分割成一块块的分别完成,如碎片化阅读、碎片化购物、碎片化交友等等。想必很多人都有这样那样的碎片化经历吧,我的主要经历是碎片化阅读。</p>
</body>
</html>
显示结果:
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了line-height设置行间的距离,文字与行之间距离、必须跟盒子高度一样的属性值。