Inline-level elements: line-height, padding and background

[Stanimir Stamenkov]

Here are two cases regarding inline-level elements' line-height,
padding and background, which I doesn't understand:

<div style="background: black; color: white; line-height: 1.5">
<span>Abc</span>
<span style="background: white; color: black; line-height:
3">Abc</span>
<span>Abc</span>
</div>

Why doesn't the middle SPAN element have white background area tall
as 3em, but has white only behind the letters?

<div style="background: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="background: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?

--
Stanimir

[Stanimir Stamenkov]

/Stanimir Stamenkov/:

Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:

Eh - no real CSSers around, really!? :-)

--
Stanimir

[Andrew Thompson]

On Tue, 06 Apr 2004 19:54:34 +0300, Stanimir Stamenkov wrote:

/Stanimir Stamenkov/:

Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:

Eh - no real CSSers around, really!? :-)

Apparently not in the 1hr 15mins
since you posted the question, no.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Andrew Thompson]

On Tue, 06 Apr 2004 18:47:06 GMT, Andrew Thompson wrote:

On Tue, 06 Apr 2004 19:54:34 +0300, Stanimir Stamenkov wrote:

/Stanimir Stamenkov/:

Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:

Eh - no real CSSers around, really!? :-)

Apparently not in the 1hr 15mins
since you posted the question, no.

Ooops!! Try *3 days* 1hr 15mins.
Yeah, OK. Slight difference.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Lee K. Seitz]

In article <1g*******************************@40tude.net>,
Andrew Thompson <Se********@www.invalid> wrote:

On Tue, 06 Apr 2004 18:47:06 GMT, Andrew Thompson wrote:

On Tue, 06 Apr 2004 19:54:34 +0300, Stanimir Stamenkov wrote:

/Stanimir Stamenkov/:

Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:

Eh - no real CSSers around, really!? :-)

Apparently not in the 1hr 15mins
since you posted the question, no.

Ooops!! Try *3 days* 1hr 15mins.
Yeah, OK. Slight difference.

I looked at your code in a couple browsers (duplicating your results)
and read the CSS1 spec, but still have no answer for you. But I'm not
a CSS expert . . . yet.

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
"This is the world we live in / And these are the hands we're given
Use them and let's start trying / To make it a place worth living in"
-- Genesis, "Land of Confusion"

[Stanimir Stamenkov]

/Lee K. Seitz/:

I looked at your code in a couple browsers (duplicating your results)
and read the CSS1 spec, but still have no answer for you. But I'm not
a CSS expert . . . yet.

Thank you, for looking at it, Lee.

I'm puzzled with these two related issues since long time but now
I've decided to ask the experts... it is that I'm still waiting for
one to come up. :-)

--
Stanimir

[Steve Pugh]

Stanimir Stamenkov <s7****@netscape.net> wrote:

Here are two cases regarding inline-level elements' line-height,
padding and background, which I doesn't understand:
The short answer is that the relationship between element boxes and
line boxes is not always obvious.

line-height determines the spacing between the baselines of adjacent
line boxes. It does not determine the height of any element boxes that
happen to lie within those line boxes.

This last point is not clear in CSS 2 where the text refers to "height
of each box generated by the element". CSS 2.1 clarifies this by
saying "height that is used in the calculation of the line box
height".
- section 10.8.1
<div style="background: black; color: white; line-height: 1.5">
<span>Abc</span>
<span style="background: white; color: black; line-height:
3">Abc</span>
<span>Abc</span>
</div>

Why doesn't the middle SPAN element have white background area tall
as 3em, but has white only behind the letters?
Any line boxes within this div are (font-size * 1.5) high except for
the line box that contains the middle span which is (font-size * 3)
high.

The span elements have a height determined by font-size alone.
<div style="background: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="background: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?

Any line boxes within this div are (font-size * 1.5) high. The height
of the div is the sum of the heights of all the line boxes it
contains.

The span element has a height determined by font-size, and then there
is padding in addition to that height.

As the padding does not affect the font size, it does not affect the
line-height, and thus does not affect the height of the div.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Stanimir Stamenkov]

/Steve Pugh/:

The span elements have a height determined by font-size alone.
O.k. I've observed it prior asking, already. Just I hadn't found
clear explanation in the spec, before. But the next part:
Stanimir Stamenkov <s7****@netscape.net> wrote:

<div style="background: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="background: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?
Any line boxes within this div are (font-size * 1.5) high. The height
of the div is the sum of the heights of all the line boxes it
contains.

Yes, that's fine. It is clear - the height of the DIV is (1.5 *
font-size)
The span element has a height determined by font-size, and then there
is padding in addition to that height.
So the SPAN element gets height of (font-size + (0.25 + 0.25) *
font-size) which is equivalent to (1.5 * font-size).
As the padding does not affect the font size, it does not affect the
line-height, and thus does not affect the height of the div.

The thing about the padding of an inline-level element doesn't
affect the line height is probably another unclear issue, but
nevertheless your answer doesn't reveal why:

(1.5 * font-size) - the DIV height

is not equal to (doesn't produce equal height background areas)

(1.5 * font-size) - the SPAN height

where the 'font-size' is same in the both expressions... ?

--
Stanimir

[Steve Pugh]

Stanimir Stamenkov <s7****@netscape.net> wrote:

/Steve Pugh/:

The span elements have a height determined by font-size alone.

O.k. I've observed it prior asking, already. Just I hadn't found
clear explanation in the spec, before. But the next part:

Stanimir Stamenkov <s7****@netscape.net> wrote:

<div style="background: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="background: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?

Any line boxes within this div are (font-size * 1.5) high. The height
of the div is the sum of the heights of all the line boxes it
contains.

Yes, that's fine. It is clear - the height of the DIV is (1.5 *
font-size)

The span element has a height determined by font-size, and then there
is padding in addition to that height.

So the SPAN element gets height of (font-size + (0.25 + 0.25) *
font-size) which is equivalent to (1.5 * font-size).

No. The span element gets height of font-size. Padding does not
contribute to height.

But padding does use background-color, so the height of the
background-colored region is indeed (font-size + (font-size * (0.25 +
0.25)))

As the padding does not affect the font size, it does not affect the
line-height, and thus does not affect the height of the div.

The thing about the padding of an inline-level element doesn't
affect the line height is probably another unclear issue, but
nevertheless your answer doesn't reveal why:

(1.5 * font-size) - the DIV height

is not equal to (doesn't produce equal height background areas)

(1.5 * font-size) - the SPAN height

where the 'font-size' is same in the both expressions... ?

The height of the span is the same as the height of the div. But,
unless you are using the broken IE box model, padding goes outside of
height, and background colour affects padding as well as the content
area.

As the spec says:
"Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
around inline boxes. This means that if the height specified by
'line-height' is less than the content height of contained boxes,
backgrounds and colors of padding and borders may "bleed" into
adjoining line boxes. User agents should render the boxes in document
order. This will cause the borders on subsequent lines to paint over
the borders and text of previous lines."

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Stanimir Stamenkov]

>>>> <div style="background: black; color: white; line-height: 1.5;

font-size: 3em">
<span>Abc</span>
<span style="background: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?

/Steve Pugh/:
No. The span element gets height of font-size. Padding does not
contribute to height.

But padding does use background-color, so the height of the
background-colored region is indeed (font-size + (font-size * (0.25 +
0.25)))
Sorry, my bad. I've meant exactly:

The SPAN element gets background area tall as (1.5 * font-size).
Stanimir Stamenkov <s7****@netscape.net> wrote:

why:

(1.5 * font-size) - the DIV height

is not equal to (doesn't produce equal height background areas)

(1.5 * font-size) - the SPAN height

where the 'font-size' is same in the both expressions... ?
The height of the span is the same as the height of the div. But,
unless you are using the broken IE box model, padding goes outside of
height, and background colour affects padding as well as the content
area.

To "normalize" things:

The DIV background area (if there's no wrapping) is tall as the
line-height which is (1.5 * font-size) and the height of the SPAN is
(1 * font-size), but like you wrote and cite the spec below, it
should get background area tall as (height + padding-top +
padding-bottom) which again is (1.5 * font-size).

So, once again: Why the SPAN background area gets rendered taller
(just a little bit but still taller) than the DIV background area?
As the spec says:
"Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
around inline boxes. This means that if the height specified by
'line-height' is less than the content height of contained boxes,
backgrounds and colors of padding and borders may "bleed" into
adjoining line boxes. User agents should render the boxes in document
order. This will cause the borders on subsequent lines to paint over
the borders and text of previous lines."

--
Stanimir

[Steve Pugh]

Stanimir Stamenkov <s7****@netscape.net> wrote:

> <div style="background: black; color: white; line-height: 1.5;
> font-size: 3em">
> <span>Abc</span>
> <span style="background: green; color: black; padding:
> 0.25em">Abc</span>
> <span>Abc</span>
> </div>
>
> Why in the above example the green background area crosses the top
> and bottom edges of the black background area?
/Steve Pugh/:

No. The span element gets height of font-size. Padding does not
contribute to height.

But padding does use background-color, so the height of the
background-colored region is indeed (font-size + (font-size * (0.25 +
0.25)))
Sorry, my bad. I've meant exactly:

The SPAN element gets background area tall as (1.5 * font-size).

The span element is (1.5 * font-size) tall.

The region covered by the green background is
(height of span element) + 0.25 + 0.25 tall.
Stanimir Stamenkov <s7****@netscape.net> wrote:

why:

(1.5 * font-size) - the DIV height

is not equal to (doesn't produce equal height background areas)

(1.5 * font-size) - the SPAN height

where the 'font-size' is same in the both expressions... ?

The height of the span is the same as the height of the div. But,
unless you are using the broken IE box model, padding goes outside of
height, and background colour affects padding as well as the content
area.

To "normalize" things:

The DIV background area (if there's no wrapping) is tall as the
line-height which is (1.5 * font-size) and the height of the SPAN is
(1 * font-size),

No, it's (X * font-size). The height of inline elements is _based_on_
the font-size but isn't automatically the _same_as_ the font-size.
Sorry if this wasn't clear before.
but like you wrote and cite the spec below, it
should get background area tall as (height + padding-top +
padding-bottom)
Yes...
which again is (1.5 * font-size).
No. ((X + 0.5) * font-size).
So, once again: Why the SPAN background area gets rendered taller
(just a little bit but still taller) than the DIV background area?

Because, (X + 0.5) > 1.5

I have just noticed that the green area isn't tall enough.

In Mozilla (with a default 16px font size) it's only 79px tall. The
black area is 72px which is exactly what we'd expect (1.5 * 16 * 3).

It seems that the green area is being calculated as default
line-height (approx 1.15 * font-size) + padding rather than as
inherited line-height + padding.

This is allowable under the CSS2.1 spec which says that for inline
elements "The height of the content area should be based on the font,
but this specification does not specify how."

i.e. X in my statements above is taken as the default line-height
value; as opposed to either the inherited line-height value as one
might at first think, or 1 as I implied in my earlier posts.

IE6, in standards mode but not quirks mode, makes the green area the
same height as the black area. This may be a bug but is allowable unde
CSS2 but not CSS2.1 (the text "However, in this case, some user agents
may use the line box to "clip" the border and padding areas (i.e., not
render them)." has been removed from CSS2.1).

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Stanimir Stamenkov]

/Steve Pugh/:

No, it's (X * font-size). The height of inline elements is _based_on_
the font-size but isn't automatically the _same_as_ the font-size.
Sorry if this wasn't clear before.

[...]

It seems that the green area is being calculated as default
line-height (approx 1.15 * font-size) + padding rather than as
inherited line-height + padding.
O.k. This time I accept the explanation, given the CSS 2.1 spec
referrence below. :-)
This is allowable under the CSS2.1 spec which says that for inline
elements "The height of the content area should be based on the font,
but this specification does not specify how."

i.e. X in my statements above is taken as the default line-height
value; as opposed to either the inherited line-height value as one
might at first think, or 1 as I implied in my earlier posts.

IE6, in standards mode but not quirks mode, makes the green area the
same height as the black area. This may be a bug but is allowable unde
CSS2 but not CSS2.1 (the text "However, in this case, some user agents
may use the line box to "clip" the border and padding areas (i.e., not
render them)." has been removed from CSS2.1).

My tests showed IE6 (in both: standards and quirks mode) renders the
height of inline elements as (line-height: normal) but seems Mozilla
has some rounding bug (or just uses another unknown X):

<div style="background: black; color: white; font-size: 9em">
<span>Abc</span>
<span style="background: green; color: black">Abc</span>
<span>Abc</span>
</div>

--
Stanimir

[Stanimir Stamenkov]

/Stanimir Stamenkov/:

/Steve Pugh/:

[...much helpful comments...]

O.k. This time I accept the explanation, given the CSS 2.1 spec
referrence below. :-)

I forgot add: Thank you very much - for your help and patience.

--
Stanimir