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 tutorial, but also through tutorials to come.
QUANTUM LEAP: THE BOX MODEL IN CSS DESIGN
You'll be spending all the remaining tutorials working with aspects of the Box Model. Because CSS is used so much for visual styling, understanding the Box Model and the way it is both interpreted and misinterpreted in browsers becomes a key issue in how well you will learn and, in turn, apply CSS to your pages. As you'll find out in tutorial 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.