当前位置:Gxlcms > 前端框架 > css怎么设置行距

css怎么设置行距

时间:2021-07-01 10:21:17 帮助过:45人阅读

css设置行距的方法:首先创建一个HTML示例文件;然后在body中定义多行文字;最后利用“line-height”属性设置行间距即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下css行间距的设置方法。

首先我们应该知道在css中并没有直接可以设置行间距的属性,所以我们就需要借助行高line-height来设置行间距,行高line-height的值越大,那么行间距就越高。

Line-height的值设置为具体的数值,可以是相对数值,也可以设置为绝对数值,在静态页面中,文字大小固定时常常使用绝对数值,而对于论坛和博客这些用户可以自定义字体大小的页面,通常设置为相对数值,从而,可以随着用户自定义的字体大小改变相应的行间距。

下面我们就来看看css中利用行高line-height来设置行间距的代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span {
                font-size: 20px;
                line-height: 2em;
            }
        </style>
         
    </head>
    <body>
        <span>
桃之夭夭,灼灼其华。之子于归,宜其室家。<br>
桃之夭夭,有蕡其实。之子于归,宜其家室。<br>
桃之夭夭,其叶蓁蓁。之子于归,宜其家人。
        </span> 
    </body>
</html>

css设置行间距的效果如下:

9b8393700799e40241166cfeee22677.png

【推荐学习:css视频教程】

以上就是css怎么设置行距的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行