First ...

You may wish to read our page on the general concept of CSS first. Click here if you do .

What is the box model?

In CSS, all elements (images, text etc) live inside a square or rectangular box. You can of course overlap transparent boxes (layers) and create the illusion of free flowing organic design but CSS cannot define irregular shaped objects.

A box in CSS has the following attributes ...

Height
Width
Padding
Border
Margin
Background color
Position
Z-index (layer order

It is especially important to understand how CSS handles the first 5 of these. Height, width, padding, border and margin combine to create the total area that a box inhabits (see diagram opposite).

Default settings/values

Even if you deliberately set no attributes for height, width, padding and margin, and no box is visible (no border and no background colour set), your elements will still be inside an invisible box with default attributes (I think this is 10pixels for padding and margin, anyone know different?).