At its core, CSS assumes that every element generates one or more rectangular boxes, called element boxes. (Future versions of the specification may allow for nonrectangular boxes, and indeed there are proposals to change this, but for now everything is rectangular.) Each element box has a content area at its center.
This content area is surrounded by optional amounts of padding, borders, outlines, and margins. These areas are considered optional because they could all be set to a width of zero, effectively removing them from the element box.
An example content area is shown in Figure below, along with the surrounding regions of padding, borders, and margins.
Each of the margins, borders, and the padding can be set using various side specific properties, such as
border-bottom, as well as shorthand properties such as
padding. The outline, if any, does not have sidespecific properties. The content’s background a color or tiled image, for example is applied within the padding by default.
The margins are always transparent, allowing the background(s) of any parent element(s) to be visible. Padding cannot have a negative length, but margins can. We’ll explore the effects of negative margins later on.
Borders are generated using defined styles, such as
inset, and their colors are set using the
border-color property. If no color is set, then the border takes on the foreground color of the element’s content. For example, if the text of a paragraph is white, then any borders around that paragraph will be white, unless the author explicitly declares a different border color. If a border style has gaps of some type, then the element’s background is visible through those gaps by default. Finally, the width of a border can never be negative.
The various components of an element box can be affected via a number of properties, such as
border-right. Many of these properties will be used in this book, even though they aren’t defined here.