On Sun, 8 Apr 2007, Chris Hoffman wrote:
> I've been playing with overlapping text and line-height is causing me
> some confusion.
This seems to be a rather confusing topic.
> p span {
> background-color: #ccc; /* make the lines visible */
> }
I used black background for body and white background for span. I think
this makes the line boxes even more visible.
> p {
> font-size: 12px;
> line-height: 14px;
> }
I get no gap between lines on IE 7 or Firefox 2 for most fonts.
There is a gap if I use Courier, though.
Using different larger values for line-height results in larger gap,
instead of making the line boxes (the rectangles with the specified
background color) taller.
What puzzles me, from the perspective of the specifications, is that as
far as I can see, line-height inherits to inner elements and should set
the minimum height for them. It's intuitively (from a typographic
perspective) more natural that an increased line-height value results in
added leading, not in increased line box height. I guess this is what CSS
specs are meant to say but they seem to say the opposite.
> As I understand it, the text box (inline box?) -- to which the
> background-color applies -- should be 12 pixels high.
That seems to be how browsers generally ínterpret the situation, and
probably the intended behavior. From the wording of the specs, I get a
different view, but let's ignore it.
> The difference
> between that and the line-height (14 - 12 = 2 pixels) should then be
> divided in half, and half added to the top of the inline box and half
> to the bottom. Then the lines should be stacked in the paragraph.
Yes, and such things normally happen. But the actual behavior seems to
depend on the font family in use. For example, testing with Lucida Sans
Unicode, I don't get a gap even for line-height: 16px. There's probably
variation across platforms too (I'm using Windows XP), since this may
relate to errors and inaccuracies in computations, and unless I'm missing
something, Windows internally expresses font sizes in points, resulting in
some inevitable rounding errors when other units are used to declare
font-size.
I'm not sure what constructive conclusions we can draw. I guess it depends
on why you set line-height.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
