On Wednesday 2003-02-26 12:19 -0600, Chad Skeeters wrote:
> I have noticed is that when you have an overall span with a line-height
> specified, but you use fonts that have a different height (bold and not bold
> in the case of Arial 12pt), it doesn't use the line-height value specified.
> Also as the font gets smaller, the line height gets bigger. You can see
> this in the example I have attached. It has a width specified at 35 so that
> way you can fit two Ws on a line. The first W is bolded and has the tallest
> height for the line. Depending on the height of the second W, the
> line-height will change.
This is the correct behavior, and the reason that it's generally a bad
idea to specify anything other than <number> values for 'line-height'.
The reason is that a 'line-height' specified as '18px' inherits as 18px:
<span style="font-size: 12px; line-height: 18px">
12px/18px
<span style="font-size: 10px;">10px/18px</span>
</span>
unlike a line height specified using number values:
<span style="font-size: 12px; line-height: 1.5">
12px/18px
<span style="font-size: 10px;">10px/15px</span>
</span>
The way the CSS inline box model works (which is somewhat contrary to
traditional layout) is that half the difference between the font box and
the 'line-height' goes on each side of the font, and the extrema of
these extents for everything in the line determines the line box height.
So when you have a smaller font, the difference between the 'font-size'
and the 'line-height' is larger, and you end up with the logical box
representing the extended font box having a smaller ascent (above the
baseline) than the one for the larger font, but a larger descent (below
the baseline). This larger descent increases the line spacing.
-David
--
L. David Baron <URL: http://dbaron.org/ >
