Laying out elements with the CSS box model

The CSS2 specification uses the box model as the basis for describing everything displayed on a Web page. This concept will require some rethinking by developers, but the flexibility of the design will pay off in the end.

If you've ever had a chance to inspect the World Wide Web Consortium's CSS2 specification (nice bedtime reading), you've been presented with the box model for laying out pages. Basically, the box model states that everything included in a Web page can be described as living in a box. You can specify layout characteristics (via CSS) by working with the aspects of this box.

Put on your gloves
The box concept is not as awkward as it sounds when you closely examine it. The CSS2 specification states, "Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties." The specification image provides a good illustration of the concept. You can denote the following characteristic of the box:
  • Top margin
  • Left margin
  • Right margin
  • Bottom margin
  • Top border
  • Bottom border
  • Left border
  • Right border
  • Top padding
  • Bottom padding
  • Left padding
  • Right padding
  • Padding background
  • Content background
  • Border properties (between elements)

The margin is the outermost element and the actual content is the innermost element. The border is inside and adjacent to the margin and the padding is inside the border and adjacent to both the border and content. The background may be set for both the padding and content areas of the box and the border between the areas may be controlled as well.

The overall box height and width also can be confusing. The overall width of the box is the sum of the left margin, left border, left padding, content width, right padding, right border, and right margin. The overall box height is the sum of the top margin, top border, top padding, content height, bottom padding, bottom border, and bottom margin.

The many facets of the box can be overwhelming, but you do not have to utilize each item. The large number of attributes illustrates the power of CSS and the granularity of the control provided by it.

The best way to further illustrate the point is through an example. The code sample in Listing A utilizes these features to present a simple text message.

The result of this example is displayed in Figure A via Mozilla 1.4, but it displays with no problems in Internet Explorer 6 as well. The example formats the margin, border, padding, and various aspects of the content area of the heading. The box is defined as the recipient of the CSS. In this case, the box encompasses the HTML H1 element.

Figure A
Example Heading

While the CSS specification provides the granularity to control the left, right, top, and bottom of the various elements; they may be set uniformly by omitting the location (left, right, etc.) designation. The resulting designated format is applied to all sides. This provides a chance for brevity when possible. Using this approach, the previous CSS could be compacted to the following lines:
h1 {
background-color: blue;
padding: 10px;
margin: 5px;
border: 2px;
border-color: yellow;
border-style: inset;
font-family: Verdana, Helvetica, sans-serif;
font-size: 50px;
font-style: italic;
font-decoration: underline;
font-variant: small-caps;
font-weight: bolder;

This saves a few lines of typing and reduces page size, thus reducing download time. The box concept is the principle of CSS layout. That is, every element is contained within its own box. You may have one H1 element along with several paragraphs and an H2 element. Each item is formatted using its own box analogy.

Dealing with multiple boxes
While every element has its own box, the elements have only one page. Think of the page as the UPS truck that delivers all of the boxes. The page will contain multiple boxes, and individual boxes may contain boxes of their own (a paragraph element may contain a table, another paragraph, and so forth). These items must be laid out individually and then combined to plan out the entire page. Page layout will be covered in a future article.

Laying the groundwork
The box model is a basic concept that must be understood to properly work with CSS. It provides the foundation for dealing with individual elements and sets the context for working with the entire page.

Editor's Picks

Free Newsletters, In your Inbox