CSS权威指南-line-height缩放因子

最新推荐文章于 2023-04-11 16:48:14 发布

Wangdanting123

最新推荐文章于 2023-04-11 16:48:14 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/Wangdanting123/article/details/51759683

版权

当一个块级元素从另一个元素继承line-height时，line-height值从父元素继承时，要从父元素计算，而不是在子元素上计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size: 10px;
        }
        div{
            line-height: 1em;
        }
        p{
            width:200px;
            font-size:18px;
        }
    </style>
</head>
<body>
<div>
    <p>王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
        王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
        王丹婷王丹婷
    </p>
</div>
</body>
</html>

解决办法，指定一个数由它设置缩放因子：指定一个数时，缩放因子将是继承值（1）而不是计算值。这个数会应用到该元素及其所有子元素，所有各元素都根据其自己的font-size计算line-height;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size: 10px;
        }
        div{
            line-height: 1;
        }
        p{
            width:200px;
            font-size:18px;
        }
    </style>
</head>
<body>
<div>
    <p>王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
        王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷王丹婷
        王丹婷王丹婷
    </p>
</div>
</body>
</html>