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

    html怎么设置p标签行间距

    王林王林2021-06-17 15:20:12原创11909

    html设置p标签行间距的方法是,给段落文字添加line-height属性,并且设置合理的行间距数值即可,例如【p.small {line-height:70%;}】,表示设置行间距为当前字体的百分之70。

    大前端零基础入门到就业:进入学习

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

    我们要设置p标签的行间距其实是非常简单的,因为在css中有一个现成的属性line-height,这是由于该属性才让行间距的设置如此简单。可能很多同学不太清楚该属性,下面就让我们来一起看看该属性吧。

    line-height属性是用来设置以百分比计的行高的。

    该属性的常用属性值有如下几种:

    下面我们来一起看看代码示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>php中文网(m.sbmmt.com)</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>

    运行效果如下图所示:

    00c196dc25ead8ffcdcf2188efcedbc.png

    相关推荐:html教程

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

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

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

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

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

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

    专题推荐:html p标签 行间距
    上一篇:怎么设置html的背景图片的位置 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• CSS的line-height属性如何设置行间距• word2010默认的行间距是多少• 如何设置文本的行间距为1.3倍行距• 行间距在哪里
    1/1

    PHP中文网