Eric A. Meyer - Basic Visual Formatting in CSS: Layout Fundamentals in CSS

At its core, CSS assumes that every element generates one or morerectangular boxes, called elementboxes. (Future versions of thespecification may allow for nonrectangular boxes, and indeed there areproposals to change this, but for now everything is rectangular.) Eachelement box has a content area at its center. This content area issurrounded by optional amounts of padding, borders, outlines, andmargins. These areas are considered optional because they could all beset to a width of zero, effectively removing them from the element box.An example content area is shown in , along with the surroundingregions of padding, borders, and margins.

Each of the margins, borders, and the padding can be set using variousside-specific properties, such as margin-left or border-bottom, aswell as shorthand properties such as padding. The outline, if any,does not have side-specific properties. The contents backgrounda coloror tiled image, for exampleis applied within the padding by default.The margins are always transparent, allowing the background(s) of anyparent element(s) to be visible. Padding cannot have a negative length,but margins can. Well explore the effects of negative margins later on.

Figure 1-1. The content area and its surroundings

Borders are generated using defined styles, such as solid or inset,and their colors are set using the border-color property. If no coloris set, then the border takes on the foreground color of the elementscontent. For example, if the text of a paragraph is white, then anyborders around that paragraph will be white, unless the author explicitly declares a different bordercolor. If a border style has gapsof some type, then the elements background is visible through thosegaps by default. Finally, the width of a border can never be negative.