当继承相对行高时,它与元素的font-size无关.为什么？我如何使它相对？

Question

我有一个全局复位,设置font-size和line-height对inherit每一个元素:

* {
  font-size:   inherit;
  line-height: iherit; }

因为html,我明确定义它们:

html {
  font-size:   16px;
  line-height: 1.25em; } /* 16×1.25 = 20 */

注意,这line-height是以相对单位设置的.

因为h1,我定义了不同的字体大小:

h1 {
  font-size: 4em; }

我希望h1继承相关line-height的1.25em.生成的行高应该等于80px(16×4×1.25).

但在现实中h1的line-height保持等于20px(这是相同html的:16×1.25 = 20).

说,我有以下HTML:

<p>foo<br>bar</p>
<h1>foo<br>bar</h1>

结果截图:

要解决这个问题,我必须定义h1的line-height明确等于它继承了相同的价值:

h1 {
  font-size:   4em;
  line-height: 1.25em; }

然后line-height变得正确:

看起来相对值首先计算为绝对值,然后继承绝对值.或者它可能是相对于父font-size元素而不是元素的继承font-size.

问题

PS有一个问题,在它的标题类似的问题,但它是在不同的细节.

Answer 1

当您使用em行高的值时,将计算行高的值,并且它是子元素也使用的计算值.

如果您使用裸数,则它是用于计算子元素行高的比率.

所以用line-height:1.25;而不是line-height:1.25em;