HTML and CSS Reference
In-Depth Information
fl ow within a block. The browser market is pretty consistent in what is treated as a block
and what is treated as an inline element. But if you need to, you can specify the display
type using the style property
display:
type
;
where
type
is a display type like those shown in Figure 4-3.
Figure 4-3
Values of the display property
Display Value
Effect On Element
block
Displayed as a block
inline
Displayed in line within a block
inline-block
Treated as a block placed in line within another block
run-in
Displayed as a block unless its next sibling is also a block, in which it is displayed
in line, essentially combining the two blocks into one
inherit
Inherits the display property of the parent element
list-item
Displayed as a list item along with a bullet marker
none
Prevented from displaying, removing it from the page structure
For example, most browsers display a citation in line within a block. But you can
place a citation in its own block using the following style rule:
cite {
display: block;
}
On the other hand, the style rule
blockquote {
display: list-item;
}
would cause a browser to display all block quotes as items from a list, complete with
bullet markers. You even can prevent browsers from displaying an element by setting its
display
property to
none
. In that case, the element is still part of the document struc-
ture but is not shown to users. This is useful for elements that include content that users
shouldn't see or have no need to see.
The Box Model
Elements also are laid out in a Web page following the structure of the
box model
,
shown in Figure 4-4, which is composed of the following series of concentric boxes:
• the content of the element itself
• the padding extending between the element's content and the border
• the border of the box surrounding the padding space
• the margin containing the space between the border and the next page element
