line-height属性总结

最新推荐文章于 2021-06-04 08:02:14 发布

weixin_34337265

最新推荐文章于 2021-06-04 08:02:14 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/windseek/p/6381297.html

版权

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;}

结果：

转载于:https://www.cnblogs.com/windseek/p/6381297.html

weixin_34337265

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
line-height属性总结

line-height属性的继承性：子元素不设置line-height时，在父元上设置带单位的值和百分比时会先计算父元素的line-height大小然后继承过来，在父元素上设置无单位的数值时，子元素会继承这个值，然后将这个值乘以子元素的font-size，得到line-heightline-height为normal时：normal的情况为默认值，浏览器会计算出“合适”的行高...
复制链接

扫一扫