Understanding the box model

The first step to understanding what we are doing with styles is to understand the space that is occupied by every element. Each element lives inside of its own box. This is true of both in-line and block displayed elements. Lets start out by looking at this Box Model Example

Note this page will only display properly in browsers that support the standard box model.

Theory is nice but lets play with the box a bit.

First create a 300 pixel square box

Next, add a 260 pixel wide paragraph inside box inside

We have a 40 pixel space on the left hand side.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tellus lectus, imperdiet et, tristique sed, bibendum non, sapien. Maecenas ultricies dignissim risus. Morbi felis justo, condimentum a, rutrum vel, luctus vehicula, leo. Donec posuere condimentum velit. .

Lets add some margins to the inside box

Adding 20 pixels to each side centers the paragraph within the outer box.

Lets add a border to the inner box

5 Pixels of border have been added arround the paragraph. The total width of the paragraph, margins and borders is now 310 pixels. But our containing box is only 300 pixels wide. *Using the standard box model.

Now lets add some padding to the inner box.

We are up to 350 pixels total width. We are also able to see some major differences between the way IE deals with this problem and the way that it is dealt with by standards compliant browsers like Fire-Fox

Alright, let's fix this mess

If we set the width of the paragraph to 210 pixels the total width of the paragraph, padding, borders and margins is 300px and everything looks nice again.

But wait, what about Win IE5.