Re: Line layout in browsers

Yes, the oddity is really that the 'content-area' in browsers is based  
on the ascent + descent of the font, and these fonts have ascents that  
in effect include some or all of their line spacing.  This means for a  
font-size of 100px, the 'content area' is often closer to 120px.

dave

>
> Eric A. Meyer wrote:
>
>> the first test on
>> <http://meyerweb.com/eric/css/tests/line-height/bigtext-spans.html>
>> there is no padding on the spans, and at 'line-height: 1' there's a
>> more than a few pixels of overlap in Safari and IE.
>
>
> Avoiding Helvetica (which seems to introduce further problems) I see  
> some
> overlap consistently in all browsers. But this looks correct, or at  
> least to
> have an explanation.
>
> According to the spec, for an inline element:
>
> "The height of the content area should be based on the font, but this
> specification does not specify how."
>
> And:
>
> "The vertical padding, border and margin of an inline, non-replaced  
> box
> start at the top and bottom of the content area, not the 'line- 
> height'"
>
>
> Indeed in all browsers a border around a span delimit a space whose  
> height
> is _independent_ on the line-height, is of course dependent on the
> font-size, but _not_ equal to the font-size.
> It is more or less equal to the 'normal' line-height, so around 1.2  
> times
> the font-size, but much dependend on the font-family.
> So at line-height:1, it is normal to have 'overlap' between borders  
> drawn
> around spans (they are not drawn around
> inline-boxes, but around 'content areas' usually higher that the  
> font-size.)
>
> Helvetica is very particular here, because (in addition to the  
> problems
> mentioned by David) it has 'normal' line-height 1, and a 'content- 
> area'
> equal to the font-size (but this is rather uncommon.)
>
>
> Here is a test case with different font families, showing different
> overlaps:
> http://www.brunildo.org/test/inline-height.html
>
>
> --
> Bruno Fassino http://www.brunildo.org/test
>
>

Received on Tuesday, 22 January 2008 00:03:13 UTC