Exploring the Box ModelThe 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. QUANTUM LEAP: THE BOX MODEL IN CSS DESIGN You'll be spending all the remaining chapters 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 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. |
