RE: Line layout in browsers

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 Monday, 21 January 2008 23:50:12 UTC