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

    css怎么调整行间距

    王林王林2021-03-04 17:05:10原创4129

    css调整行间距的方法:可以利用line-height属性来调整行间距,如【p.big {line-height:200%;}】,表示将行间距调整为基于当前字体尺寸的百分之两百。

    大前端成长进阶课程:进入学习

    本文操作环境:windows10系统、css 3、thinkpad t480电脑。

    在css中,如果我们需要调整文字之间的行距,可以使用line-height属性,该属性可以设置以百分比计的行高。

    注意:负值是不允许的。

    属性值:

    代码示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    <style>
    p.small {line-height:70%;}
    p.big {line-height:200%;}
    </style>
    </head>
    
    <body>
    <p>
    这是一个标准行高的段落。<br>
    这是一个标准行高的段落。<br>
    大多数浏览器的默认行高约为110%至120%。<br>
    </p>
    
    <p class="small">
    这是一个更小行高的段落。<br>
    这是一个更小行高的段落。<br>
    这是一个更小行高的段落。<br>
    这是一个更小行高的段落。<br>
    </p>
    
    <p class="big">
    这是一个更大行高的段落。<br>
    这是一个更大行高的段落。<br>
    这是一个更大行高的段落。<br>
    这是一个更大行高的段落。<br>
    </p>
    
    </body>
    </html>

    (学习视频分享:css视频教程

    运行结果:

    cc90f20e329402a933f05cbaf0be2f3.png

    相关推荐:CSS教程

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css 行间距
    上一篇:css注释的两种写法是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• notepad++怎么设置行间距• excel如何设置行间距• word2010默认的行间距是多少• 如何设置文本的行间距为1.3倍行距
    1/1

    PHP中文网