• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter Twelve. Working with Browsers Pa... > The Box Model and Its Discontents

The Box Model and Its Discontents

With the publication of CSS1 in 1996, the W3C proposed that any object on a web page inhabits a box whose properties designers can control by creating rules. It doesn't matter if the object is a paragraph, list, headline, image, or generic block-level element such as <div id="navigation">. If it can be inserted into a web page via markup, it lives in a box.

Figure 12.1 illustrates the four areas of the CSS box: content, padding, border, and margin. Content (dark gray in our diagram) is the innermost area, followed by padding (light gray), border (black), and margin (white). These areas should be familiar to you. In Chapter 10, “CSS in Action: A Hybrid Layout (Part II),” while creating a hybrid layout for the i3Forum site, we specified border, padding, and margin values for various page elements. We also assigned size values to the content area when we wrote rules like the one that follows. (Content values are highlighted in bold.)


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint