W3C home > Mailing lists > Public > www-style@w3.org > March 2001

Re: CSS 2: Table Cells and the "line-height" Property

From: James Aylard <jaylard@pixelwright.com>
Date: Mon, 26 Mar 2001 10:31:47 -0800
Message-ID: <013201c0b623$048c7b80$2161398a@newcos.com>
To: <www-style@w3.org>
Cc: "Ian Hickson" <ian@hixie.ch>

> My interpretation is based heavily on David's interpretation.
> David's interpretation is also what was used when deciding how to
> implement this in Mozilla.

    But David makes clear in his box model white paper that "[i]t is more
than just an explanation of CSS 2's model, since it incorporates a number of
changes that I have proposed." [1]

> > But the CSS 2 recommendation, section 17.5.3 [1], states:
> >
> ># The baseline of a cell is the baseline of the first line box in the
> ># cell. If there is no text, the baseline is the baseline of whatever
> ># object is displayed in the cell, or, if it has none, the bottom of the
> ># cell box.
> This is actually ambiguous. When the specification says "If there is no
> text", it should really say "If there is no line box". There are various
> ways of creating a line box without text, for example an empty inline
> element generates a line box, as does whitespace (especially with 'white-
> space' set to 'pre') and inline replaced elements such as images.
> See, for instance, section 10.8:
> ...or section 9.2.5:
> ...or section 9.2.2:

    Section 9.2.2 is apropos, but the critical part of it, as I read it, is
in the first paragraph:

"Inline-level elements are those elements of the source document that do not
form new blocks of content; the content is distributed in lines (e.g.,
emphasized pieces of text within a paragraph, inline images, etc.)....
Inline-level elements generate inline boxes." [2]

    So an inline image generates and inline box. The height of inline boxes,
however, are not all calculated alike. Section 10.6 [3] details how these
heights are calculated. Most to the point are subsections 10.6.1 [4] and
10.6.2 [5]:

"10.6.1 Inline, non-replaced elements
"If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their
computed value is 0. The 'height' property doesn't apply, but the height of
the box is given by the 'line-height' property." [4]

"10.6.2 Inline, replaced elements block-level, replaced elements in normal
flow, and floating, replaced elements
"If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their
computed value is 0. If 'height' is 'auto', the computed value is the
intrinsic height." [5]

    An image is an inline *replaced* element, and therefore section 10.6.2
should apply. There is no line-height value for an image (or, if there is,
it does not influence the height of the image's inline box). Assuming that
"top", "bottom", "margin-top", and "margin-bottom" are either "auto" or 0,
the height of the inline box of an image contained within a td will be
either the intrinsic height or the specified height of the image.
    If a td is considered a block-level element for the sake of determining
the effect of the inline boxes that it contains, the inline formatting
context described in section 9.4.2 [6] applies. (Granted, a td is not,
strictly speaking, a block-level element; however, it has many of the
characteristics of a block-level element in how it treats inline-level
elements.) That formatting context states that "[t]he rectangular area that
contains the [inline] boxes that form a line is called a line box." [6] It
also states that the height of a line box is determined by the rules
specified in section 10.8 [7].
    Boiled down, the height of a line box is determined by: 1) the height of
each inline box that it contains; 2) the vertical alignment of those inline
boxes; and 3) any resulting difference between the uppermost inline box top
and the lowermost inline box bottom.
    So: a line box which contains a single inline box, which in turn
contains an image of, say, 5 pixels in height -- with "auto" or "0" for its
"top", "bottom", "margin-top", and "margin-bottom" settings -- will itself
be 5 pixels in height. A td which contains this line box, and which itself
has a "height" value of 5, should be 5 pixels in height (assuming that it is
either the only table cell within its row or that no other table cell
contained within this same row does not exceed 5 pixels in height).
    After reading your arguments, and further studying the CSS 2
recommendation, I don't understand why a td that contains only an image
can't be treated differently than a td that contains text, white space, or
inline non-replaced content.
    Regardless, though complicated, the CSS 2 recommendation actually seems
quite clear in how inline content, inline boxes, and line boxes affect the
height of a containing block element. It is the Mozilla team that seems to
have made this confusing. And, unfortunately, I have concluded (although I
am open to further persuasion) that the Mozilla interpretation is contrary
to the CSS 2 recommendation.

James Aylard

1. http://www.people.fas.harvard.edu/~dbaron/css/2000/01/dibm
2. http://www.w3.org/TR/REC-CSS2/visuren.html#q7
3. http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_heights_and_margins
4. http://www.w3.org/TR/REC-CSS2/visudet.html#q15
5. http://www.w3.org/TR/REC-CSS2/visudet.html#q16
6. http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting
7. http://www.w3.org/TR/REC-CSS2/visudet.html#line-height
Received on Monday, 26 March 2001 13:32:05 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:26:57 UTC