首页 / CSS / CSS的line-height属性如何设置行间距

CSS的line-height属性如何设置行间距

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS的line-height属性如何设置行间距，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2186字，纯文字阅读大概需要4分钟。

内容图文

CSS中行间距的实现需要line-height属性，接下来的这篇文章就来给大家介绍CSS使用line-height属性的具体方法。

CSS的line-height属性如何设置行间距 - 文章图片

字符间的间隔太大或者太窄有时可能不太确定，我们需要根据网站的需要来进行调整，而使用CSS的line-height属性可以调整字符间的距离。

我们下面来看具体的示例

我们先来创建以下的HTML代码（浏览器默认尺寸为16px）

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">冬天的百草园比较的无味；雪一下，可就两样了。拍雪人（将自己的全形印在雪上）和塑雪罗汉需要人们鉴赏，这是荒园，人迹罕至，所以不相宜，只好来捕鸟。薄薄的雪，是不行的；总须积雪盖了地面一两天，鸟雀们久已无处觅食的时候才好。扫开一块雪，露出地面，用一支短棒支起一面大的竹筛来，下面撒些秕谷，棒上系一条长绳，人远远地牵着，看鸟雀下来啄食，走到竹筛底下的时候，将绳子一拉，便罩住了。 </p>
<p class="sample2">先生读书入神的时候，于我们是很相宜的。有几个便用纸糊的盔甲套在指甲上做戏。我是画画儿，用一种叫作“荆川纸”的，蒙在小说的绣像上一个个描下来，象习字时候的影写一样。读的书多起来，画的画也多起来；书没有读成，画的成绩却不少了，最成片断的是《荡寇志》和《西游记》的绣像，都有一大本。 </p>
</body>
</html>

接下来我们在CSS中应用line-height属性

我们首先把line-height属性的值设置normal

CSS代码

p.sample1 {line-height:normal; }
p.sample2 {line-height:normal; }

这个状态为默认情况下的个状态，所以字符间距没有改变

效果如下

CSS的line-height属性如何设置行间距 - 文章图片

下面我们用以下三个单位分别来设置行间距

用px设置

CSS代码如下

p.sample1 {line-height:20px; }
p.sample2 {line-height:50px; }

在浏览器上显示效果如下。用line-height设置数值（这里是默认的16 px）会把数值上下均等地分配。因此，数值越大，行的间隔也越大。

CSS的line-height属性如何设置行间距 - 文章图片

用em设置

接下来是以单位em（Em）设置行间距的例子。em是以font - size属性指定的大小为1的单位，没有在父元素中被指定的情况下为1 em = 16px。

CSS代码如下

p.sample1 {line-height:2em; }
p.sample2 {line-height:4em; }

在浏览器上显示效果如下

这里指定的值越大，行间距越大。默认为16px，其中2em = 32 px、4em = 64px。

CSS的line-height属性如何设置行间距 - 文章图片

用%设置

最后用%设置。以font-size属性指定的大小为100%，用指定的%的数值设置行间距。如果没有被设置的父元素的话，100% = 16px。

CSS代码如下所示

p.sample1 {line-height:150%; }
p.sample2 {line-height:200%; }

在浏览器上显示如下效果

CSS的line-height属性如何设置行间距 - 文章图片

以上就是CSS的line-height属性如何设置行间距的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS的line-height属性如何设置行间距全部内容，希望文章能够帮你解决CSS的line-height属性如何设置行间距所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/410584.html

来源：【匿名】