The Spec: On the `edge' of despair

The CSS 2.1 specification uses some very confusing (if not erroneous)
terminology in describing the fundamental concepts of the Box Model:

  http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#box-dimensions

Consider the following (I give an improved version further down):

    ...

    Each box has a content area (e.g., text, an image, etc.) and
    optional surrounding padding, border, and margin areas; ...

    ...

    The perimeter of each of the four areas (content, padding,
    border, and margin) is called an "edge", so each box has
    four edges:

        content edge or inner edge
            The content edge surrounds the rectangle given by
            the width and height of the box, which often depend
            on the element's rendered content. The four content
            edges define the box's content box.
        
        padding edge
            The padding edge surrounds the box padding. If the
            padding has 0 width, the padding edge is the same as
            the content edge. The four padding edges define the
            box's padding box.

        border edge
            The border edge surrounds the box's border. If the
            border has 0 width, the border edge is the same as
            the padding edge. The four border edges define the
            box's border box.

        margin edge or outer edge
            The margin edge surrounds the box margin. If the
            margin has 0 width, the margin edge is the same as
            the border edge. The four margin edges define the
            box's margin box.

    Each edge may be broken down into a top, right, bottom, and
    left edge.

    ...

In particular:

    * The perimeter of each of the four areas (content, padding,
      border, and margin) is called an "edge", so each box has
      four edges:

    * The content edge surrounds the rectangle... The four
      content edges define the box's content box.

    * The padding edge surrounds the box padding... The four
      padding edges define the box's padding box.

    * The border edge surrounds the box's border... The four
      border edges define the box's border box.

    * The margin edge surrounds the box margin... The four
      margin edges define the box's margin box.

    * If the padding has 0 width...
    * If the border has 0 width...
    * If the margin has 0 width...

    * Each edge may be broken down into a top, right, bottom, and
      left edge.

The uses of the words `perimeter', `edge', `width', and `box' are
completely unreasonable unless the following statements are
considered reasonable:

    * The `perimeter' of an area really means the `outer perimeter'
      of an area.

      The word `edge' is a suitable synonym for the word `perimeter'.

    * The phrase `four content edges' means:

          top content edge, right content edge,
          bottom content edge, and left content edge

      which doesn't make sense until the next statement is discovered
      by reading further into the specification.

      [Repeat this statement for each of `padding', `border', and
      `margin' in place of `content'.]

    * The phrase `content box' means "the box's content area".
    * The phrase `padding box' means "the box's padding area".
    * The phrase `border box'  means "the box's border area".
    * The phrase `margin box'  means "the box's margin area".

    * The word `width' is a suitable synonym for the word `area'.

    * The sentence:
          The four content edges define the box's content box. 
      really means:
          The content edge defines the box's content area.

    * The sentence:
          The four padding edges define the box's padding box. 
      really means:
          The content edge and the padding edge define the
          box's padding area.

    * The sentence:
          The four border edges define the box's border box. 
      really means:
          The padding edge and the border edge define the
          box's border area.

    * The sentence:
          The four margin edges define the box's margin box. 
      really means:
          The border edge and the margin edge define the
          box's margin area.

    * The phrase `top edge' is equivalent to the phrase `top of the edge'
      (or at least the `edge' in `top edge' has no meaning by itself).

      [Repeat this rule for each of `right', `bottom', and `left'
       in place of `top'].

I think the passage in question (shown fully here) should read
as follows (there are a number of improvements):

    Each box has a content area (containing text, an image, etc.)
    and optional padding, border, and margin areas; the size of each
    area is specified by properties defined below. The following
    diagram shows how these areas relate and what terminology is
    used to refer to pieces of the margin, border, and padding
    areas:

                    <diagram>

    The margin, border, and padding areas can be broken down into
    top, right, bottom, and left segments (e.g., in the diagram,
    "LM" for left margin, "RP" for right padding, "TB" for top
    border, etc.).

    The outer perimeter of each area is simply called a "boundary"
    (e.g., the outer perimeter of the the content area is called
    the "content boundary"); each boundary may be broken down into
    top, right, bottom, and left edges (e.g., a content boundary
    has a top content edge).

    A box has four boundaries:

        content boundary
            The content boundary surrounds the rectangle given
            by the width and height of the box, dimensions which
            often depend on the rendered content of the element
            associated with the box (a box's width and height are
            discussed in the chapter on the details of the visual
            formatting model).

            The content boundary defines the box's content area.

        padding boundary
            The padding boundary surrounds the box's padding area.
            If the padding area is 0, then the padding boundary is
            the same as the content boundary.
            
            The content boundary and the padding boundary define the
            box's padding area.

        border boundary
            The border boundary surrounds the box's border area.
            If the border area is 0, then the border boundary is
            the same as the padding boundary.
            
            The padding boundary and the border boundary define the
            box's border area.

        margin boundary
            The margin boundary surrounds the box's margin area.
            If the margin area is 0, then the margin boundary is
            the same as the border boundary.
            
            The border boundary and the margin boundary define the
            box's margin area.

    The dimensions of the content area of a box (the content width
    and content height) depend on several factors:

        * The statuses of the 'width' and 'height' properties
          of the element associated with the box.
        
        * Whether the associated element is a table.
          
        * The presence of other boxes within the box.
        
        * etc.

    The background style for both the content and padding areas of
    a box is specified by the 'background' property of the element
    associated with the box.

    The background style of each of the border edges of a box is
    set with the relevant border property of the element associated
    with the box.

    The background style of the margin area is always transparent.

Sincerely,
Michael Witten

Received on Tuesday, 15 November 2011 17:36:52 UTC