O'Reilly logo

CSS Pocket Reference, 3rd Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Box model details
Figure 1-2. Box model details

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required