Understanding the CSS Box Model - Beginning CSS3 - page 90

Introducing the Components of the Box Model
The CSS box model consists of the following components:

Content This is the content of an HTML element, such as a paragraph, image,
<div> , or <span> .

Padding Horizontal and vertical space surrounding the content.

Border A border drawn around the padding.

Margin Horizontal and vertical space outside the border.

Figure 6-1 shows how these components t together.

margin
border

padding

Content box

width

height content Padding box

Border box

Figure 6-1. The standard CSS box model

Browsers apply default values to individual elements. For example, paragraphs have default top and bottom
margins, but no padding or border, whereas <div> elements have no padding, border, or margins. You can use
CSS to adjust the padding, border, and margins independently on each side of an element to control its look
and layout.
Figure 6-1 looks perfectly logical. Padding goes around the content, the border goes around the padding,
and the margin goes around the border. What confuses many people is the way in which width and height are
calculated. Another complicating factor is the behavior of adjacent vertical margins. First, let's take a look at
width and height.

■ if you use an incomplete DOCTYPE or none at all, internet Explorer 8 and earlier switch to quirks mode,
which uses an incorrect version of the box model. See “The importance of the doCTYPE” in Chapter 2 .

Caution

Setting Width and Height
he width and height properties set the horizontal and vertical dimensions of an element. The default value of
both properties is auto , which means that the element expands or contracts to fit the natural size of the content.
Another four properties allow you to constrain the dimensions of an element within a specified range. Table 6-1
describes the width- and height-related properties.