Formatting model
Formatting model
CSS1 assumes a simple box-oriented formatting model where each formatted
element results in one or more rectangular boxes. (Elements that have a
'display' value of 'none' are not formatted and will therefore not result in a
box.) All boxes have a core content area with optional surrounding padding,
border and margin areas.
_______________________________________
|
|
| margin (transparent)
|
| _________________________________
|
| | |
|
| | border |
|
| | ___________________________ |
|
| | | | |
|
| | | padding | |
|
| | | _____________________ | |
|
| | | | | | |
|
| | | | content | | |
|
| | | |_____________________| | |
|
| | |___________________________| |
|
| |_________________________________|
|
|_______________________________________|
| element width
|
| box width
|
The size of the margin, border and padding are set with the margin, padding
, and border properties respectively. The padding area uses the same background
as the element itself. The color and style for the border is set with the border
properties. The margins are always transparent, so the parent element will shine
through.
The size of the box is the sum of the element width (i.e. formatted text or
image) and the padding, the border and the margin areas.
From the formatter's point of view there are two main types of elements:
block-level and inline.
Block-level elements
Elements with a 'display' value of 'block' or 'list-item' are
block-level elements. Also, floating elements (elements with a 'float'
value other than 'none') are considered to be block-level elements.
The following example shows how margins and padding format a 'UL' element
with two children. To simplify the diagram there are no borders. Also, the
single-letter "constants" in this example are not legal CSS1 syntax, but is a
convenient way to tie the style sheet values to the figure.
<STYLE
TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* so text is white
on blue */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>1st element of
list
<LI>2nd element of
list
</UL>
_______________________________________________________
|
|
| A UL margin (transparent)
|
|
_______________________________________________ |
| D |
| B |
| | E UL padding (red)
| |
| |
_______________________________________ | |
| | H |
| F | |
| | | a LI margin (transparent,
| | |
| | | so red shines through)
| | |
| | | _______________________________
| | |
| | | d | |
b | | |
| | | | e LI padding (blue) |
| | |
| | | | |
| | |
| | | | h 1st element of list f |
| | |
| | | | |
| | |
| | | | g |
| | |
| | | |_______________________________|
| | |
| | |
| | |
| | | max(a, c)
| | | <- note the max
| | | _______________________________
| | |
| | | | |
| | |
| | | d | e LI padding (blue) |
| | |
| | | | |
| | |
| | | | h 2nd element of list f |
| | |
| | | | |
| | |
| | | | g |
| | |
| | | |_______________________________|
| | |
| | |
| | |
| | | c LI margin (transparent,
| | |
| | | so red shines through)
| | |
| |
|_______________________________________| | |
| |
| |
| | G
| |
|
|_______________________________________________| |
|
|
| C
|
|_______________________________________________________|
Technically, padding and margin properties are not inherited. But, as the
example shows, the placement of an element is relative to ancestors and
siblings, so these elements' padding and margin properties have an effect on
their children.
If there had been borders in the above example they would have appeared
between the padding and the margins.
The following diagram introduces some useful terminology:
---------------
<-- top
top
margin
---------------
top
border
---------------
top
padding
+-------------+
<-- inner top
| | | | |
| | |
|--left--|--left--|--left--|-- content
--|--right--|--right--|--right--|
| margin | border | padding| |
padding | border | margin |
| | | | |
| | |
+-------------+
<-- inner bottom
^ ^
^ ^
left left inner edge
right inner edge right
outer
outer
edge bottom
padding edge
---------------
bottom
border
---------------
bottom
margin
---------------
<-- bottom
The left outer edge is the edge of an element with its padding,
border and margin taken into account. The left inner edge is the edge of
the content only, inside any padding, border or margin. Ditto for right. The
top is the top of the element including any padding, border and margin;
it is only defined for inline and floating elements, not for non-floating
block-level elements. The inner top is the top of the content, inside any
padding, border or margin. The bottom is the bottom of the element,
outside any padding, border and margin; it is only defined for inline and
floating elements, not for non-floating block-level elements. The inner
bottom is the bottom of the element, inside any padding, border and margin.
The width of an element is the width of the content, i.e., the
distance between left inner edge and right inner edge. The height is the
height of the content, i.e., the distance from inner top to inner
bottom.
Vertical formatting
The width of the margin on non-floating block-level elements specifies the
minimum distance to the edges of surrounding boxes. Two or more adjoining
vertical margins (i.e., with no border, padding or content between them) are
collapsed to use the maximum of the margin values. In most cases, after
collapsing the vertical margins the result is visually more pleasing and closer
to what the designer expects. In the example above, the margins between the two
'LI' elements are collapsed by using the maximum of the first LI element's
'margin-bottom' and the second LI element's 'margin-top'. Similarly, if the
padding between the 'UL' and the first 'LI' element (the "E" constant) had been
zero, the margins of the UL and first LI elements would have been collapsed.
In the case of negative margins, the absolute maximum of the negative
adjoining margins is deducted from the maximum of the positive adjoining
margins. If there are no positive margins, the absolute maximum of the negative
adjoining margins is deducted from zero.
Horizontal formatting
The horizontal position and size of a non-floating, block-level element is
determined by seven properties: 'margin-left', 'border-left', 'padding-left',
'width', 'padding-right', 'border-right' and 'margin-right'. The sum of these
seven is always equal to the 'width' of the parent element.
By default, the 'width' of an element is 'auto'. If the element is not a
replaced element, this means that the 'width' is calculated by the UA so that
the sum of the seven properties mentioned above is equal to the parent width. If
the element is a replaced element, a value of 'auto' for 'width' is
automatically replaced by the element's intrinsic width.
Three of the seven properties can be set to 'auto': 'margin-left', 'width'
and 'margin-right'. For replaced elements, a value of 'auto' on 'width' is
replaced by the intrinsic width, so for them there can only be two 'auto'
values.
The 'width' has a non-negative UA-defined minimum value (which may vary
from element to element and even depend on other properties). If 'width' goes
below this limit, either because it was set explicitly, or because it was 'auto'
and the rules below would make it too small, the value will be replaced with the
minimum value instead.
If exactly one of 'margin-left', 'width' or 'margin-right' is
'auto', the UA will assign that property a value that will make the sum of the
seven equal to the parent's width.
If none of the properties are 'auto', the value of 'margin-right'
will be assigned 'auto'.
If more than one of the three is 'auto', and one of them is 'width',
then the others ('margin-left' and/or 'margin-right') will be set to zero and
'width' will get the value needed to make the sum of the seven equal to the
parent's width.
Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they will
be set to equal values. This will center the element inside its parent.
If 'auto' is set as the value for one of the seven properties in an element
that is inline or floating, it will be treated as if it were set to zero.
Unlike vertical margins, horizontal margins are not collapsed.
List-item elements
Elements with a 'display' property value of 'list-item' are formatted as
block-level elements, but preceded by a list-item marker. The type of marker is
determined by the 'list-style' property. The marker is placed according to the
value of the 'list-style' property:
<STYLE
TYPE="text/css">
UL { list-style: outside
}
UL.compact { list-style: inside
}
</STYLE>
<UL>
<LI>first list item comes
first
<LI>second list item comes
second
</UL>
<UL CLASS=COMPACT>
<LI>first list item comes
first
<LI>second list item comes
second
</UL>
The above example may be formatted as:
* first list item
comes first
* second list item
comes second
* first list
item comes first
* second list
item comes second
In right-to-left text, the markers would have been on the right side of the
box.
Floating elements
Using the 'float' property, an element can be declared to be outside the
normal flow of elements and is then formatted as a block-level element. For
example, by setting the 'float' property of an image to 'left', the image is
moved to the left until the margin, padding or border of another block-level
element is reached. The normal flow will wrap around on the right side. The
margins, borders and padding of the element itself will be honored, and the
margins never collapse with the margins of adjacent elements.
A floating element is positioned subject to the following constraints
- The left outer edge of a left-floating element may not be to the left of the
left inner edge of its parent element. Analogously for right floating elements.
- The left outer edge of a left floating element must be to the right of the
right outer edge of every earlier (in the HTML source) left-floating element or
the top of the former must be lower than the bottom of the latter. Analogously
for right floating elements.
- The right outer edge of a left-floating element may not be to the right of
the left outer edge of any right-floating element that is to the right of it.
Analogously for right-floating elements.
- A floating element's top may not be higher than the inner top of its parent.
- A floating element's top may not be higher than the top of any earlier
floating or block-level element.
- A floating element's top may not be higher than the top of any
line-box (see section 4.4) with content that precedes the floating
element in the HTML source.
- A floating element must be placed as high as possible.
- A left-floating element must be put as far to the left as possible, a
right-floating element as far to the right as possible. A higher position is
preferred over one that is further to the left/right.
<STYLE
TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em
}
</STYLE>
<BODY>
<P>
<IMG
SRC=/eng/catalog/pages/comp/871/font>
Some sample text that has no
other...
</BODY>
The above example could be formatted as:
________________________________________
|
| max(BODY margin, P
margin)
|
______________________________
| | | Some sample
text
| B | P | IMG margins that has no
other
| O | | _____ purpose than to
| D | m | | | show how
floating
| Y | a | | IMG | elements are
moved
| | r | | | to the side of
the
| m | g | |_____| parent
element
| a | i | while
honoring
| r | n | margins,
borders
| g | | and padding.
Note
| i | |how adjacent vertical margins
| n | |are collapsed between
non-
| | |floating block-level
elements.
Note that the margin of the 'P' element encloses the floating 'IMG'
element.
There are two situations when floating elements can overlap with the
margin, border and padding areas of other elements:
- when the floating element has a negative margin: negative margins on
floating elements are honored as on other block-level elements.
- when the floating element is wider or higher than the element it is inside
Inline elements
Elements that are not formatted as block-level elements are inline
elements. An inline element can share line space with other elements. Consider
this example:
<P>Several
<EM>emphasized</EM> words
<STRONG>appear</STRONG>.</P>
The 'P' element is normally block-level, while 'EM' and 'STRONG' are inline
elements. If the 'P' element is wide enough to format the whole element on one
line, there will be two inline elements on the line:
Several emphasized words
appear.
If there is not enough room on one line an inline element will be split
into several boxes:
<P>Several <EM>emphasized
words</EM> appear here.</P>
The above example may be formatted as:
Several
emphasized
words appear
here.
If the inline element has margins, borders, padding or text decorations
attached, these will have no effect where the element is broken:
----------
Several
|emphasized
----------
-----
words| appear
here.
-----
(The "figure" above is slightly distorted due to the use of ASCII
graphics..
Replaced elements
A replaced element is an element which is replaced by content pointed to
from the element. E.g., in HTML, the 'IMG' element is replaced by the image
pointed to by the 'SRC' attribute. One can assume that replaced elements come
with their own intrinsic dimensions. If the value of the 'width' property is
'auto', the intrinsic width is used as the width of the element. If a value
other than 'auto' is specified in the style sheet, this value is used and the
replaced element is resized accordingly (the resize method will depend on the
media type). The 'height' property is used in the same manner.
Replaced elements can be either block-level or inline.
The height of lines
All elements have a 'line-height' property that, in principle, gives the
total height of a line of text. Space is added above and below the text of the
line to arrive at that line height. For example, if the text is 12pt high and
'line-height' is set to '14pt', an extra space of 2pt is added, namely 1pt above
and 1pt below the line. Empty elements influence these calculations just like
elements with content.
The difference between the font size and the 'line-height' is called the
leading. Half the leading is called the half-leading. After
formatting, each line will form a rectangular line-box.
If a line of text contains sections with different 'line-height' values
(because there are inline elements on the line), then each of those sections has
its own half-leading above and below. The height of the line-box is from the top
of the highest section to the bottom of the lowest one. Note that the top and
bottom do not necessarily correspond to the tallest element, since elements can
be positioned vertically with the 'vertical-align' property. To form a
paragraph, each line-box is stacked immediately below the previous line.
Note that any padding, border or margin above and below non-replaced inline
elements does not influence the height of the line. In other words: if the
'line-height' is too small for the chosen padding or border, it will overlap
with text on other lines.
Replaced elements (e.g. images) on the line can make the line-box bigger,
if the top of the replaced element (i.e., including all of its padding, border
and margin) is above the tallest text section, or if the bottom is below the
lowest.
In the normal case, when there is only one value of 'line-height'
throughout a paragraph, and no tall images, the definition above will ensure
that baselines of successive lines are exactly 'line-height' apart. This is
important when columns of text in different fonts have to be aligned, for
example in a table.
Note that this doesn't preclude the text on two adjacent lines from
overlapping each other. The 'line-height' may be smaller than the height of the
text, in which case the leading will be negative. This is useful if you know
that the text will contain no descenders (e.g., because it only contains
uppercase), so the lines can be put closer together.
The canvas
The canvas is the part of the UA's drawing surface onto which documents are
rendered. No structural element of a document corresponds to the canvas, and
this raises two issues when formatting a document:
- from where should the dimensions of the canvas be set?
- when the document doesn't cover the whole canvas, how should this area be
rendered?
A reasonable answer to the first question is that the
initial width of the canvas is based on the window size, but CSS1 leaves this
issue for the UA to decide. It is also reasonable to expect the UA to change the
width of the canvas when the window is resized, but this is also outside the
scope of CSS1.
HTML extensions have set a precedent for the second question: attributes on
the 'BODY' element set the background of the whole canvas. To support designers'
expectations, CSS1 introduces a special rule to find the canvas background:
If the
'background' value of the 'HTML' element is different from 'transparent' then
use it, else use the 'background' value of the 'BODY' element. If the resulting
value is 'transparent', the rendering is undefined.
This rule allows:
<HTML STYLE="background:
url(http://style.com/marble.png)">
<BODY STYLE="background:
red">
In the example above, the canvas will be covered with "marble". The
background of the 'BODY' element (which may or may not fully cover the canvas)
will be red.
Until other means of addressing the canvas become available, it is
recommended that canvas properties are set on the 'BODY' element.
'BR' elements
The current CSS1 properties and values cannot describe the behavior of the
'BR' element. In HTML, the 'BR' element specifies a line break between words. In
effect, the element is replaced by a line break. Future versions of CSS may
handle added and replaced content, but CSS1-based formatters must treat 'BR'
specially.
|
