HTML and CSS Reference
In-Depth Information
or by adding a selector followed by the rule to the
style
element in the docu-
ment's head element:
#preamble em { display: block; }
his applies only to the emphasis element inside the preamble division. When
opened in a browser, the emphasized words will appear on a line by them-
selves, breaking the low of the division's content.
he HTML5 elements for marking up sections, divisions, headings, para-
graphs, lists, tables, block quotes, address blocks, and code examples—to name
a few—are all block elements. All block elements have box properties: margins,
borders, padding, height, and width (and depth, too!). Box properties can be
visualized as a set of nested boxes, as shown in Figure 2.5a.
Margin
Border
Padding
Content
H
e
i
g
h
t
Width
Figure 2.5a: Box properties of block elements
Imagine a cardboard shipping box. he cardboard shell is the “border” of
the box, and it has a certain margin of space between it and the other boxes on
the shelf. he inside of the box will accommodate an object of a certain height
and width, plus whatever padding is desired to protect the object.
Normally, block elements appear on a web page in the same order as they
are deined in the HTML source code: from top to bottom. Unless otherwise
changed by an attribute or CSS rule, a block element is as wide as it needs to
be to accommodate its contents and padding. If there is suicient content, the
