• 技术文章 >web前端 >css教程

    CSS行间距怎么设置

    不言不言2021-04-18 13:33:23原创12739

    CSS行间距的设置方法:首先创建一个HTML示例文件;然后在body中定义一些文本内容;最后通过行高“line-height”来设置行间距即可。

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

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

    行间距

    本篇文章到这里就全部结束了,更多其他精彩内容大家可以关注php中文网相关教程栏目!!!

    以上就是CSS行间距怎么设置的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:CSS行间距
    上一篇:displaytable是什么?display:table-cell的怎么应用 下一篇:css如何控制文字换行方式?(代码示例)
    大前端线上培训班

    相关文章推荐

    • css实现行间距效果_经验交流• Dreamweaver中设置html网页段落行间距的方法指导• css如何设置行间距?css文本文字的行间距设置(代码实例)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网