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?
css, font-size, html
Solution
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 of `line-height:1.25em;`
Problem
I have a global reset that sets `font-size` and `line-height` to `inherit` 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 relative `line-height` of `1.25em`. The resulting line-height should be equal to 80px (16×4×1.25). But in reality `h1`'s `line-height` remains equal to `20px` (that's the same as `html`'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: http://jsfiddle.net/M3t5y/5/ To work around this problem, i have to define `h1`'s `line-height` explicitly equal to the same value that it inherits: ``` h1 { font-size: 4em; line-height: 1.25em; } ``` Then `line-height` becomes correct: http://jsfiddle.net/M3t5y/6/ 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's `font-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's `font-size`, not its parent's? PS There's a question with a similar problem in its title, but it is different in detail.