Creating Space and Understanding the Box Model - CSS3 Foundations - page 109

Because the box model is invisible—it changes the visual layout of an element, but you can't see the boundaries that
make up that element—Figure 7-2 shows exactly how the margin-top and padding property change the box
model for the footer.
Figure 7-2 The way the box model of the footer element is laid out.
Look familiar? Figure 5-19 in Chapter 5 showed the content area and padding area to demonstrate background-
clip and background-origin . In Figure 7-2, the margin area is also shown, which adds space outside the
footer element.
Figure 7-3 shows how the content, padding, border, and margin areas relate.
• The content area is that which contains the content.
• The padding area, which is optional and 0 by default, is the area between the content area and the inner edge
of the border.
• The border, which is optional and none by default, is the visual edge around an element (in Figure 7-3 I
made the border 27px so it can be clearly seen).
• The margin area, which is optional and 0 by default, is the area outside the border.
Figure 7-3 A simplified version of the box model.