Sent by Eric A. Meyer on 24 June 2002 11:11
At 21:58 +0900 6/21/02, Philippe Wittenbergh wrote:
>On Friday, June 21, 2002, at 02:03 , Big John wrote:
>
>> Let's say I have a page with the 'line-height' set to some value,
>> perhaps '110%'. Then in a div I specify 'font-size:6em;' in order
>> to make some text real big.
>>
>> Should the line-height for that div be adjusted by the browser
>> to match the increased font-size?
No (see below).
>As far as i understand, specifying line-height globally (on <body>)
>will affect all boxes. So if you specify:
>body {
> font-size: 1em;
> line-height: 1.5 em;}
>This will be the line-height set for the whole document,
Not preceisely true (see below).
>E. Meyer confirms this: <Quote>...the number itself is inherited,
>not the computed value.</quote>
>(from E.Meyer, Cascading stylesheets, the definitive guide. p415).
I do say that, but it doesn't confirm your assertion. Note that I
say when a number is specified, then it's inherited. In your example
code, you attempted to specify a length. Here's the corrected
version of the code you provided (which I rearranged to save space):
body {font-size: 1em; line-height: 1.5em;}
You've now set the 'line-height' of the 'body' element to be half
again as big as the user's preference. Let's make this simpler:
body {font-size: 10px; line-height: 1.5em;}
Okay, so the value of 'line-height' for 'body' is '15px'. That exact
value is inherited by descendant element. So if I have:
h1 {font-size: 200%;}
...then the 'line-height' for that 'h1' should be '15px'. The
COMPUTED value is inherited, not the length relationship. This is
just as true if we say 'line-height: 150%;' instead of '1.5em'.
Why don't browsers act this way? Typically it's because they have
internal styles that will override inheritance. If a browser has
stored internally a rule like '* {line-height: 1.1em;}' then that's
going to override the inheritance I describe above. On the other
hand, you can't rely on that being the case. I couldn't find such a
rule in Mozilla's UA styles, for example.
If you specify a "raw" number for 'line-height', sans any unit
identifiers that turn it into a length unit, then the number is
inherited as a scaling factor, which is what I was talking about in
the book. For example:
body {font-size: 1em; line-height: 1.5;}
Now the multiplier of '1.5' is inherited downward to descendant
elements, and so each element's 'line-height' will be calculated as
1.5 times the value of 'font-size' for each element. This is one of
the very few places in all of CSS where a raw number is permitted
(the others are 'font-size-adjust' and several aural-media
properties). The ins and outs of 'line-height' are described by
<http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height>,
including the bits about numbers being inherited instead of computed
values. If you jump over to
<http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value>
(CSS2:6.1.2), you'll see that it uses 'line-height' as an example of
exceptions to the rule about inheritance of computed values.
--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://www.mako4css.com/)
