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

本文介绍: 本文介绍了父元素的line–height值在不同情况下，子元素 line–height的继承结果。

1. line–h e i g ht为具体数值

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

&lt;style&gt;
	body{
	    font-size: 20px;
	    line-height: 50px;
	}
	p{
	    background-color: #ccc;
	    font-size: 16px;
	}
&lt;/style&gt;

&lt;body&gt;
    <P>这是一行文字</P>
</body>

在这里插入图片描述

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>

在这里插入图片描述

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>