Re: [css21] line-height, problem?

On Sun, Nov 25, 2012 at 11:21 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> This sample:
>
> https://dl.dropbox.com/u/14981836/line-height-test.htm
>
> contains two identical paragraphs, the only difference is that
> first one has line-height:normal and second one - line-height:1em;
>
> According to the spec [1]:
>    'line-height' specifies the *minimal* height of line boxes within
> the element.
>
> If that property defines minimal height then these two paragraphs
> should be rendered in the same way. But all browsers I've tried render this
> sample with results I cannot interpret. The only exception is IE9, it treats
> as if 'line-height' defines max-line-height. That is also against the
> spec but at
> least the rendering is predictable somehow.
>
> I suspect that I miss something between lines of the spec.
> My understanding of the spec wording is this:
>
> used-line-height = max( {normal-line-height}, {defined-line-height} );
>
> I'd appreciate any comments on the subject.

As David said, using "1em" is almost certainly not what you want.
That values computes to "16px" (on most machines), and inherits as
such, which is why the second paragraph has overlapping lines.

Using "1", as David suggests, is better - in inherits as "1" and so
continues to act like you want.

However, "normal" is not equivalent to "1".  It's equivalent to
*something between 1 and 1.2*, where the exact value is
implementation-defined.

~TJ

Received on Monday, 26 November 2012 18:10:36 UTC