Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Box Model Mastery

Last updated Oct 17, 2003.

Box Model Mastery takes a look at how to understand the box model, which is the browser's model as to how it generates boxes for elements. With CSS, you can then control those boxes by modifying their margins, borders and padding to obtain space and style as well as move the boxes around the page.

In this article, you'll learn what the Box Model is, how it behaves in most modern browsers, and how you can make modifications to aspects of the box to gain space and style for your page elements.

Reader level: Beginner to intermediate CSS

Browser support level: Modern browsers

Where's the Box?

All modern visual browsers use a box model to allow for modification of element boxes. This means that every element within the body of the document generates a box. Every element! Examine the following code snippets in relation to the screen shots I've taken with CSS-styled borders so you can see the actual element box that is being generated by each element.

For example 1, let's start with a simple paragraph:

<p>One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on
his armour-like back, and if he lifted his head a little he could
see his brown belly, slightly domed and divided by arches into stiff
sections.</p> 

Figure 1 shows the text plus the fact that there's a box generated as shown by the visual presence of the box's border.

Figure 1

Figure 1 Visualizing a paragraph's box.

How about something a bit more complicated, such as a list? Example 2 shows an unordered list:

<ul>
<li>A mirror</li>
<li>A lipstick</li>

<li>A wallet</li>
<li>A driver's license</li>
</ul>

Figure 2 shows how both the ul element and the li elements each generate a box. The ul element contains all the li elements including their generated bullets, and I've provided a different color border style to show the individual boxes for each li, which can then each be styled differently.

Figure 2

Figure 2 Boxes on all elements.

For example 3, I'll take an empty (also referred to as replaced) element which has no text content. I've added a little padding so you can see the display box that it generates, too:

<hr />

Figure 3 shows the results, demonstrating even how unexpected elements have boxes as well. Note that in the case of replaced elements, there is no content box per se, but you can set a specific width and add padding, borders and margins, too.

Figure 3

Figure 3 Boxes for empty elements, too.

What's in the Box?

You've now seen what happens when I add a border to the box, an aspect of the box appears. You've also found out that if an element contains text, that text is carried within the box. Finally, you've seen how empty elements such as hr, br, and even img create a box despite the fact that they have no text content.

There are box model implementation problems that I'll get to in a moment, but all box model implementations contain the following:

  • The content area, where any content for the box goes
  • The padding area, where any padding to any number or all four sides of the content goes
  • The border area, where a border width, style and color can be set to your tastes using CSS
  • The box's margins, where margins for the box are defined

The way that browsers implement box model technology has been a bit disconcerting in the past leaving us with inconsistently measured boxes between various browsers. This, as a result, left us unable to tap into the box model quite so easily to do pure CSS layouts. In order to deal with browser discrepancies, we'd have to use hacks and filters, which as browsers become more unified toward standards is now actually causing us some backward compatibility concerns.

To better gain control over the designs you create, and tap into the box model while reducing or eliminating the need for hacks, you'll begin by finding out exactly why browsers have box discrepancies.

The Microsoft Box Model

Microsoft, being a proprietary commercial entity, has often chosen to implement aspects of browsers that are none-standard. Fortunately, this practice is being reduced now in favor of including W3C standards in their software, as well as their own features. Until such a time as existing discrepancies don't impact our day-to-day tasks, we still have to look at where the issues lie and how they affect the work we do.

The Microsoft Box Model can be seen in Figure 4.

Figure 4

Figure 4 The Microsoft Box Model

Notice the following issues:

  • The Microsoft Box Model places the padding inside the box
  • In this model, margins are not calculated within the box
  • Borders are also included in width calculations for the box

This translates to a big problem. If I want to set a width to the paragraph I showed in Example 1, I have to include the padding, margin and borders in the total width. Consider this CSS:

P {
 width: 100px; 
 padding-left: 10px; 
 padding-right: 10px; 
 border-left: 1px solid blue; 
 border-right: 1px solid red; 
 margin-left: 5px; 
 margin-right: 5px;
 }

How wide is my box, really? If you guessed 122 pixels, you're correct, according to the Microsoft calculation. That's because I've had to add the content width of 100 plus the left padding and right padding, plus the 1 pixel borders to the left and to the right of the content box. The margins aren't calculated as part of the Microsoft Box Model.

The W3C (Standard) Box Model

The W3C's Box Model is decidedly unlike Microsoft's model (Figure 5).

Figure 5

Figure 5 The W3C Box Model

Notice the following:

  • The W3C Box Model places the padding outside the box
  • In this model, margins are calculated outside the box
  • Borders are also excluded from width calculations for the box
  • The width of a calculated box using the W3C box model is the explicit width of the content section

If we consider the same CSS applied to this box, how wide is my box? If you guessed 100 pixels, you're correct! You can see how prior to IE 6.0, which has a fix for the box model, we had to use hacks to get around this problem, or there'd be no consistency in our CSS-based element designs from browser to browser.

Can I Make the Box Look Nicer?

So if every element makes a box can you control the width, padding, borders and margins of that box? That's the point! Once you've conquered the differences in the way that the box model is calculated and are ensuring that you're using a consistent box model, you can use CSS freely to style your boxes.

One very nice aspect of styling boxes is that you can add a separate padding, border or margin style to each of the box's four sides. Or not, it's up to you.

Styling padding

Padding allows for some visual space around the box content. It's important to remember that padding is related to the content more than to other elements that might nearby. This is one way in which padding is differentiated from margins, which act differently.

Typically, padding is used to rest the eye or provide some breathing room from box contents. I'll return to the first example of the paragraph. As is, there is no white space between the padding and any border, conceivably making the text within the content area of the box hard to read. So, I can add padding to any individual side using the padding-right, padding-left, padding-bottom or padding-top properties.

If I want to use shorthand CSS, I can do so as well. This means only using the padding property and then using 1 – 4 values. Consider these examples:

padding: 1em;

This means 1em of padding will be placed on all four sides of the box,

padding: 10px 20px;

This will give the top and bottom padding a value of 10px each, and the right and left padding a value of 20px each,

padding: 10px 20px 5px;

This will give the top 10px, the right 20px, the bottom 5px, and the left 20px.

padding: 10px 20px 5px 0;

This will provide 10px to the top, 20px to the right, 5px to the bottom, and a value of 0 to the left.

Figure 6 shows the results of each of these boxes with the related padding. Note that I've set a width of 100 pixels for each box and have added a border so you can visualize the way the padding is working in relation to the content and border edge.

Figure 6

Figure 6 Using padding on a paragraph element

Styling borders

Styling borders can really add a nice touch to aspects of your design without ever having to use graphics. Borders can take a width, a color, and a style and can be applied to any or all sides of a box. Table 1 describes the styles available, please note that not all styles display properly in all browsers.

Table 1: W3C Compliant Border Styles, CSS 2.0

Dotted

A series of dots.

Dashed

A series of dashes.

Solid

A solid, single line.

Double

The border is two solid lines. The sum of the two lines and the space between them equals the value of the border's width.

Groove

The border looks as though it were carved into the canvas.

Ridge

The border looks as though it were coming out of the canvas.

Inset

The border makes the entire box look as though it were embedded in the canvas.

Outset

The border makes the entire box look as though it were coming out of the canvas.

Figure 7 shows samples of the various border styles around a padded box.

Figure 7

Figure 7

Border styles.

As you can see, not every border style is supported. The W3C explicitly says "Conforming HTML user agents may interpret ’dotted’, ’dashed’, ’double’, ’groove’, ’ridge’, ’inset’, and ’outset’ to be ’solid’." Essentially, this allows browser software developers to determine how they're going to implement a given style.

Styling margins

Styling margins is very similar to the way padding is styled. You can use the longhand properties to style individual sides of the box, or, you can use the shorthand property of margin and then use the numeric values in the same way I demonstrated earlier in the article.

The issue to remember about margins, however, is that they exist to separate elements. In this sense, they are all about white space around the element, but they are also used for element placement. Margins should not be confused with padding, which pads the element's content, and not the element itself.

In the following example, I've used four div elements, each with a width, padding, borders, and in each case, margins.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Working with the Box Model</title>
<style type="text/css">
div {font-size: 100%;}
#div1{width: 100px; padding: 10px; border: 1px solid red; margin-left: 100px;}
#div2 {width: 100px; padding: 20px; border: 2px dashed green; margin-bottom: 100px;}
#div3 {width: 100px; padding: 10px; border: 1px solid #ccc; margin: 0 0 -10px;}
#div4 {width: 100px; padding: 40px; border: 1px solid blue; margin: 0;}
</style>

</head>
<body>
<div id="div1">Sample Box 1</div>
<div id="div2">Sample Box 2</div>
<div id="div3">Sample Box 3</div>

<div id="div4">Sample Box 4</div>
</body>
</html>

Figure 8 shows the boxes drawn on the browser canvas. Compare the markup and CSS above to the rendering, equating each property to the styled margin, border, and padding for each box.

Figure 8

Figure 8 Margin relationships with element boxes.

Styles to come

Can you style element boxes in other ways? You bet! You can add background graphics and colors; you can position elements to create great interface features such as consistent branding and module boxes; you can use floats to create column-based layouts and so on.

In fact, you'll learn to do just these things in future columns, but for now there's one important understanding to take away: Every element creates a box, every box can be styled. Once you've got the core of that concept down, it becomes much easier to encourage minimal markup for maximum style results.

Up Next? Adding background graphics and colors for enhanced type, graphic detail and sophisticated imagery.