HTML and CSS Reference
In-Depth Information
Figure 2.1. A graphic representation of the box model
The box model components in this diagram are exaggerated. Normally, the only large and
visible area of any HTML element is the content area. Using this larger-than-life example,
however, we can discuss each component, starting from the inside and working our way out:
Content
The content portion of the box model holds—you guessed it—the actual content. We in-
troduced this briefly in Chapter 1 when discussing HTML elements. The content can be
text, images, or whatever else is visible on a web page.
Padding
The padding of an element is defined using the padding property. The padding is
the space around the content. It can be defined for an individual side (for example,
padding-left: 20px
) or for all four sides in one declaration—
padding: 20px
10px 30px 20px
, for instance. When declaring all four sides, you're using a
short-
hand
property. There'll be more on shorthand later in the chapter. Often when a CSS
property takes multiple values like this, they start at the top and go clockwise in relation
