HTML and CSS Reference
In-Depth Information
Basic Visual Layout
CSS defines algorithms for laying out any element in a document. These algorithms form the
underpinnings of visual presentation in CSS. There are two primary kinds of layout, each with
very different behaviors: block-level and inline-level layout.
Block-Level Layout
A block-level box in CSS generates a rectangular box called the elementbox, which describes
the amount of space occupied by an element.
Figure 1-2
shows the various components of an
element box. The following rules apply to an element box:
▪ The background of the element box extends to the outer edge of the border, thus filling the
content, padding, and border areas. If the border has any transparent portions (e.g., it is
dotted or dashed), the background will be visible in those portions. The background does
not extend into the margin areas of the box. Any outlines are drawn in the margin area and
do not affect layout.
▪ Only the margins,
height
, and
width
of an element box may be set to
auto
.
▪ Only margins can be given negative values.
▪ The padding and border widths of the element box default to
0
(zero) and
none
, respect-
ively.
▪ If
box-sizing
is
content-box
(the default value), the property
width
defines only the
width of the content area; any padding, borders, or margins are added to it. The same is
true for
height
with respect to the height.
▪ If
box-sizing
is
border-box
, the property
width
defines the total width of the content,
padding, and borders; any margins are added to it. The same is true for
height
with re-
spect to the height.
