HTML and CSS Reference
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.
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-
▪ 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.