【面试题】line-height继承问题

1. line-height为具体数值

当父元素line-height的值为具体数值的时候，例如30px，则子元素的line-height直接继承该数值。

<style>
	body{
	    font-size: 20px;
	    line-height: 50px;
	}
	p{
	    background-color: #ccc;
	    font-size: 16px;
	}
style>

<body>
    <P>这是一行文字P>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

2. line-height为比例

当父元素line-height的值为比例时，如2、1.5，则子元素的line-height为子元素的font-size值乘上该比例。

<style>
	body{
	    font-size: 20px;
	    line-height: 2;
	}
	p{
	    background-color: #ccc;
	    font-size: 16px;
	}
style>

<body>
    <P>这是一行文字P>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

3. line-height为百分比

当父元素line-height的值为百分比时，如200%，则子元素的line-height值为父元素的font-size值乘上父元素的line-height的百分比。

<style>
	body{
	    font-size: 20px;
	    line-height: 200%;
	}
	p{
	    background-color: #ccc;
	    font-size: 16px;
	}
style>

<body>
    <P>这是一行文字P>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

相关阅读:
安卓性能优化
研究生复试核心竞争力：编程（加分项）
力扣26 - 删除有序数组中的重复项【快慢指针】
ElasticSearch - 基础概念，以及和 mysql 的对比
榕树贷款元数据接入支持 T+1 和近实时两种方式
华为机试 - 目录删除
流量卡计费及相关介绍
5月刚刚阿里面软件测试岗回来，3+1面任职阿里P7,年薪28*15薪
什么是嵌入式视觉
小米C++开发，校招二面

原文地址：https://blog.csdn.net/zx1041561837/article/details/127933381