The Box Model Explained

Overview

The box model is used to control placement of information on a web page. It really is that simple. Sometimes specific information within the box model commands are used to add color or other location-specific styling details; at other times the box model is used solely to control placement of elements within a page. By combining box model commands within Div elements, the structure of a web page can be built so that each "box" will act in a relative manner to other boxes and information around it, therefore setting the layout for the page.

How Does the Box Model Work?

The box model is made up of one or a combination of 3 commands: margins, padding and borders. They nest like this:

Margins

Margins are like invisible force fields around the outside of a piece of information. Pixel values added to the margin command will add a "force field" of that size around the information, so that nothing else can get close to the information (unless it is in the CSS background layer) - it gives the information some space.

Padding

Padding acts similarly to a margin, in that it creates space around a piece of information. The difference between a margin and padding is that a margin adds empty space directly to the outside of the information; padding effectively increases the total size of the space and then indents the information to bring it back to its original size. This means that you can use padding to add colored backgrounds, like a mat in a picture frame. Whether you use margins or padding becomes really important if you are using borders, because padding always sits inside a border, whereas margins always sit outside a border.

This shows how a 20 pixel margin works with text

This shows how 20 pixel padding works with text

Borders

Borders are exactly as they sound - they are like picture frames around a set of information. Borders can be styled with colors and set styles such as dashes, groove or dotted.