前言

line-height属性算是CSS中比较常用的属性了，那么你知道line-height属性是如何计算的吗？你知道整数、小数、百分比形式计算会有什么不同吗？

今天我就来大家来了解一下line-height属性是如何计算的。

整数数值

例：父元素font-size: 20px; 子元素font-size: 15px;

父元素line-height: 50px

子元素line-height如图所示：

在这里插入图片描述

子元素line-height = 父元素line-height = 50px

小数（比值）

例：父元素font-size: 20px; 子元素font-size: 15px;

父元素 line-height: 1.5

子元素line-height如图所示：

在这里插入图片描述

子元素line-height = 父元素line-height * 子元素font-size = 1.5* 15 = 22.5px

百分比

例：父元素font-size: 20px; 子元素font-size: 15px;

父元素line-height: 100%

子元素line-height如图所示：

在这里插入图片描述

子元素line-height = 父元素line-height * 父元素font-size = 100% * 20 = 20px;

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 如何计算line-height属性</title>
    <style>
        div{
            font-size: 20px;
            line-height: 50px;
            /* line-height: 1.5; */
            /* line-height: 100%; */
        }
        p{
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div>
        <P>CSS 如何计算line-height属性</P>
    </div>
</body>
</html>

总结

整数数值：子元素line-height = 父元素line-height；

比值（小数）：子元素line-height = 父元素line-height * 子元素font-size；

百分比：子元素line-height = 父元素line-height * 父元素font-size；

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！