首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >line-height属性总结

line-height属性总结

作者头像
windseek
发布2018-06-14 17:58:53
1K0
发布2018-06-14 17:58:53
举报
文章被收录于专栏:杨龙飞前端杨龙飞前端

 line-height属性的继承性:

子元素不设置line-height时,

在父元上设置带单位的值和百分比时会先计算父元素的line-height大小然后继承过来,在父元素上设置无单位的数值时,子元素会继承这个值,然后将这个值乘以子元素的font-size,得到line-height

line-height为normal时:

normal的情况为默认值,浏览器会计算出“合适”的行高,多数浏览器(Georgia字体下)取值为1.14,即为font-size的1.14倍,如果未设定font-size,那既是基准值16px的1.14倍 单独讨论这个取值是没什么意义的,因为normal和具体的数值相比,会因为字体的不同而不同 如果是项目需要,还是给定一个值好一些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div class="lh1">
        <p>行高1</p>
    </div>

    <div class="lh2">
        <p>行高2</p>
    </div>
    
    <div class="lh3">
        <p>行高3</p>
    </div>
</body>
</html>
        .lh1{
            font-size: 20px;
            line-height: 2em;
            background: red;
        }
        .lh2{
            font-size: 20px;
            line-height: 2;
            background: green;
        }
        .lh3{
            font-size: 20px;
            line-height: 200%;
            background: blue;
        }
        p{font-size:12px;}

结果:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-02-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档