Page Layout with CSS - Web Development and Design Foundations with XHTML - page 218

Figure 6.4
The CSS box model

● The content area can consist of a combination of text and Web page elements
such as images, paragraphs, headings, lists, and so on. The visible width of the
element on a Web page is the total of the content width, the padding width, and
the border width.
● The padding area is between the content and the border. The default padding
value is zero. When configuring the background of an element, the background is
applied to both the padding and the content areas.
● The border area is between the padding and the margin. The default border has a
value of 0 and does not display. You have already worked with borders in Hands-
On Practice 4.2. As shown in Figure 4.2, this area can be set to various styles.
● The margin determines the empty space between the element and any adjacent
elements. The margin is always transparent. The solid line in Figure 6.4 that
contains the margin area does not display on a Web page. Keep in mind that
browsers often have default margin values set for the Web page document and for
certain elements such as paragraphs, headings, forms, and so on. Use the margin
property to override the default browser values.

Figures 6.5 and 6.6 display <div> elements containing text content. Let's take a closer
look. Figure 6.5 shows a screenshot of two <div> elements placed one after another on
a Web page. In Figure 6.6 the boxes are nested inside each other. In both cases, the
browser used normal flow (the default) and displayed the elements in the order that

Figure 6.5
Two <div>
elements displaying
the box model

Figure 6.6
Nested elements
showing the box
model