Exploring the Box Model
The Box Model is a standardized bit of browser technology. The W3C oversees standardization of browsers, so it has defined the Box Model (see Figure 11-2).
Figure 11-2. The Box Model as defined by the W3C.
Compare this figure with Figure 11-1, and imagine how the highlighted background of each box contains all these portions: margins, borders, padding, and the content area. Understanding this correlation will help you greatly as you proceed not only through this chapter, but also through chapters to come.Chapter 12, "Positioning, Floats, and Z-index," the Box Model relates not only to how you style margins, borders, and padding, but also to how you use CSS as a positioning tool to achieve your layouts.