Standard 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.

First create a 300 pixel square box

Next, add a 260 pixel wide paragraph inside box inside

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

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