Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel