CODEWITHSUNDEEP
css
Phil
Phil

Reputation: 273

font shorthand line-height not inheriting on child elements

I have this declaration

body {font: normal .625em/1.2em Arial, sans-serif;}

I would normally expect that any paragraph tags etc would inherit the line-height and adapt it to there specific size. For example

p {font-size: 2.0em}

should have a line-height of 24px assuming a base 16px browser font size * .625 = 10px * 2.0em = 20px 1.2em line height on 20px is 24.

Odd thing it appears to be rendering as just 1em

If i change the body declaration to 

body {font: normal .625em/1.2 Arial, sans-serif;}

omitting the em unit it renders correctly. So I guess my problem is solved but I have never seen this before and am very confused as to why this is. Does anyone know the reason for it? Sorry I cant point to a site I am building locally.

Upvotes: 1

Views: 1007

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

When a property is inherited, the inherited value is the “computed value”. This means that if you declare a value of 1.2em for body, then the body font size is multiplied by 1.2 and the result is the value that will be inherited by any child of body that does not have the property set on them. No matter what their own font sizes are.

For line-height, there is a special rule regarding the use of pure (unitless) numbers: “The used value of the property is this number multiplied by the element's font size. […] The computed value is the same as the specified value.” This means that when you specify the value as 1.2, then you get the same line height for body (the “used value”) as you get by using 1.2em, but the inherited value (“computed value”) is the pure number 1.2. And this means that it will get multiplied by each element’s own font size.

The morale is that line-height should normally be set using a pure number. Moreover, it is generally best to set it for all elements, avoiding all inheritance for it, e.g. * { line-height: 1.3; }. (By the way, 1.3 is generally better than 1.2 for Arial. StackOverflow uses a value corresponding to 1.3, with Arial as the primary font, and the line height is hardly excessive here. But this depends on factors like line length of course.)

Upvotes: 0

cimmanon
cimmanon

Reputation: 68309

Eric Meyer wrote on the topic of "unitless line-height" several years ago: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Basically, if you include the unit, then the line-height is based off of the ancestor element's font-size and not the current element's font-size.

Upvotes: 2

Related Questions