dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 661|回复: 0

[Html/Css] 如何给HTML页面设置行高

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-4-16 16:00:00 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    设置行高#
    • 由于简单还是老样子直接上代码了哦,注意:line-height属性值可以使用固定值如:20px..和百分比如:20%。
    • 如果想让文字垂直居中如下:行高的主要作用是用来设置文本的垂直方向居中对齐行高的值与高度的值一样即可。
    • 让我们进入line-height属性实践,实践内容如:将p标签行高设置为20px。
    • 代码块

    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>设置字符和单词距离</title>
        <style>
            p{
                line-height: 20px;
            }
        </style>
    </head>
    <body>
        <p>成功不是打败别人,而是改变自己。</p>
        <p>成功不是打败别人,而是改变自己。</p>
        <p>成功不是打败别人,而是改变自己。</p>
    
    </body>
    </html>


    结果图


                                   1.png

    注意:使用百分比如下简陋的代码块。


    [HTML] 纯文本查看 复制代码
        <style>
            p{
                line-height: 20%;
            }
        </style



    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-4-28 11:13 , Processed in 0.083746 second(s), 36 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表