当相对行高被继承时,它不是相对于元素的字体大小。为什么?我该如何让它相对? [英] When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative?
问题描述
我有一个全局重置设置 font-size
和 line-height
到继承
:
* {
font-size:继承;
line-height:iherit; }
对于 html
:
html {
font-size:16px;
line-height:1.25em; } / * 16×1.25 = 20 * /
注意, c>,我定义不同的字体大小:
h1 {
font-size:4em; }
我希望 h1
继承相对 line-height
1.25em
。生成的行高应该等于80px(16×4×1.25)。
但实际上 h1
line-height
保持等于 20px
(与 html
's:16 x 1.25 = 20)。
说,我有以下HTML:
b $ b
< p> foo< br> bar< / p>
< h1> foo< br> bar< / h1>
结果截图:
img src =https://i.stack.imgur.com/g0Dxd.pngalt =相对行高不正确地继承>
看来,相对值首先计算为绝对值,然后绝对值被继承。或者也许它相对于父项的 font-size
而不是元素的 font-size
问题
- 为什么是相对的
line-height
继承不正确? - 如何使相对
line-height
作为相对于元素的<$ http://stackoverflow.com/questions/14483372/wrong-rendering-of-inherited-line-height\">问题在标题中有类似的问题,但细节不同。解决方案当使用
em
行高的值时,计算行高的值,并且是子元素也使用的计算值。
如果使用裸数,则它是用于计算子元素的比率
因此使用
line-height:1.25;
而不是-height:1.25em;
I have a global reset that sets
font-size
andline-height
toinherit
for every element:* { font-size: inherit; line-height: iherit; }
For
html
, i define them explicitly:html { font-size: 16px; line-height: 1.25em; } /* 16×1.25 = 20 */
Note, that
line-height
is set in a relative unit.For
h1
, i define different font-size:h1 { font-size: 4em; }
I expect
h1
to inherit the relativeline-height
of1.25em
. The resulting line-height should be equal to 80px (16×4×1.25).But in reality
h1
'sline-height
remains equal to20px
(that's the same ashtml
's: 16×1.25=20).Say, i have the following HTML:
<p>foo<br>bar</p> <h1>foo<br>bar</h1>
Screenshot of the result:
To work around this problem, i have to define
h1
'sline-height
explicitly equal to the same value that it inherits:h1 { font-size: 4em; line-height: 1.25em; }
Then
line-height
becomes correct:It looks like the relative value is first calculated into the absolute value and then the absolute value is inherited. Or maybe it is inherited relative to the parent's
font-size
, not the element'sfont-size
.Questions
- Why is the relative
line-height
inherited incorrectly? - How do make the relative
line-height
be inherited as a value relative to the element'sfont-size
, not its parent's?
PS There's a question with a similar problem in its title, but it is different in detail.
解决方案When you use
em
values for line height, the value of the line height is computed, and it is that computed value which is also used by child elements.If you use a bare number instead, it is the ratio that is used for the calculation of child element line-heights.
So use
line-height:1.25;
instead ofline-height:1.25em;
这篇关于当相对行高被继承时,它不是相对于元素的字体大小。为什么?我该如何让它相对?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
- Why is the relative