CSS 之 line-height如何继承

 line-height继承，一共有以下3种情况：

html代码

<body>
    <p>这是一行文字</p>
</body>

 

1. 写具体数值，则直接继承该值。

body {
    font-size: 20px;
    line-height: 50px; /* 数值 */
}
p {
    font-size: 10px;
}

<p> 元素 line-height 直接继承50px

 

2. 写比例，如2 或者1.5 等，则继承该比例。

body {
    font-size: 20px;
    line-height: 2; /* 比例 */
}
p {
    font-size: 10px;
}

<p>元素 line-height 直接继承比例，

<p>元素line-height = 2（比例）* 10px（font-size）= 20px

 

3. 写百分比，如200%，则先计算再继承算出来的值。（差分点）

body {
    font-size: 20px;
    line-height: 200%; /* 百分比 */
}
p {
    font-size: 10px;
}

<p>元素 line-height 继承计算后的值，

<p>元素line-height = 200%（百分比）* 20px（父元素的font-size）= 40px

 

posted @ 2021-02-25 21:11  Better-HTQ  阅读(649)  评论(0)  编辑  收藏  举报