- From: Michael Witten <mfwitten@gmail.com>
- Date: Tue, 15 Nov 2011 15:22:21 -0000
- To: www-style@w3.org
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