CSS Pocket Reference, 3rd Edition

Block-Level Layout

A block-level box in CSS generates a rectangular box called the element box, 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 an element 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), then the background will be visible in those portions.

• 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 borders of the element box default to 0 (zero) and none, respectively.

• 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.

Figure 1-2. Box model details