CSS 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 primary property/values ...
- 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 property values
Even if you deliberately set no property/values 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 property/values (I think this is 10pixels for padding and margin, anyone know different?).
Internet Explorer 5 for Windows box model bug
Read about this important issue here and learn how to overcome it.