[ Pobierz całość w formacie PDF ]
initial value. For example, the font of the anonymous box is inherited from the DIV,
but the margins will be 0.
2 Aug 2002 21:33
102
Visual formatting model
Properties set on elements that are turned into anonymous block boxes still apply
to the content of the element. For example, if a border had been set on the BODY
element in the above example, the border would be drawn around C1 and C2.
9.2.2 Inline-level elements and inline boxes
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.). Several values of the ’display’ property
make an element inline: ’inline’, ’inline-table’, and ’run-in’ (part of the time; see run-in
boxes [p. 103] ). Inline-level elements generate inline boxes.
Anonymous inline boxes
In a document like this:
PSome EMemphasized/em text/P
The P generates a block box, with several inline boxes inside it. The box for
"emphasized" is an inline box generated by an inline element (EM), but the other
boxes ("Some" and "text") are inline boxes generated by a block-level element (P).
The latter are called anonymous inline boxes, because they don’t have an associ-
ated inline-level element.
Such anonymous inline boxes inherit inheritable properties from their block parent
box. Non-inherited properties have their initial value. In the example, the color of the
anonymous inline boxes is inherited from the P, but the background is transparent.
If it is clear from the context which type of anonymous box is meant, both anony-
mous inline boxes and anonymous block boxes are simply called anonymous boxes
in this specification.
There are more types of anonymous boxes that arise when formatting tables
[p. 214] .
9.2.3 Run-in boxes
A run-in box behaves as follows:
If a block [p. 101] box (that does not float and is not absolutely positioned
[p. 118] ) follows the run-in box, the run-in box becomes the first inline box of the
block box.
Otherwise, the run-in box becomes a block box.
A ’run-in’ box is useful for run-in headers, as in this example:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEA run-in box example/TITLE
STYLE type="text/css"
H3 { display: run-in }
103
2 Aug 2002 21:33
Visual formatting model
/STYLE
/HEAD
BODY
H3A run-in heading./H3
PAnd a paragraph of text that
follows it.
/BODY
/HTML
This example might be formatted as:
A run-in heading. And a
paragraph of text that
follows it.
The properties of the run-in element are inherited from its parent in the source
tree, not from the block box it visually becomes part of.
Please consult the section on generated content [p. 168] for information about how
run-in boxes interact with generated content.
9.2.4 The ’display’ property
’display’
Value:
inline | block | list-item | run-in | inline-block | table | inline-table |
table-row-group | table-header-group | table-footer-group |
table-row | table-column-group | table-column | table-cell |
table-caption | none | inherit
Initial:
inline
Applies to:
all elements
Inherited:
no
Percentages: N/A
Media:
all
The values of this property have the following meanings:
block
This value causes an element to generate a block box.
inline-block
This value causes an element to generate a block box, which itself is flowed as
a single inline box, similar to a replaced element. The inside of an inline-block is
formatted as a block box, and the element itself is formatted as a replaced
element on the line.
inline
This value causes an element to generate one or more inline boxes.
list-item
This value causes an element (e.g., LI in HTML) to generate a principal block
box and a list-item inline box. For information about lists and examples of list
formatting, please consult the section on lists [p. 173] .
2 Aug 2002 21:33
104
Visual formatting model
none
This value causes an element to generate no boxes in the formatting structure
[p. 26] (i.e., the element has no effect on layout). Descendant elements do not
generate any boxes either; this behavior cannot be overridden by setting the
’display’ property on the descendants.
Please note that a display of ’none’ does not create an invisible box; it creates
no box at all. CSS includes mechanisms that enable an element to generate
boxes in the formatting structure that affect formatting but are not visible them-
selves. Please consult the section on visibility [p. 161] for details.
run-in
This value creates either block or inline boxes, depending on context. Properties
[ Pobierz całość w formacie PDF ]