Learnolog: CSS - the box model

Its worth dedicating a blog entry for explaining the box model.

Audio blog on CSS box model
CSS box model:
Every page element is a box !! I guess this is the single most important thing you need to understand before learning anything about Box model of CSS.
The box has,

content
padding
border
margin

I will explain the box model with a simple example.
Suppose you are having an unordered list. The whole list is a box and in turn each list element is a box.
The box has a border. You can make this border visible by giving it solid pattern and some color and thickness.
For example,
li {
border: solid 2px red;
width: 50px;
}
Now you can see the border surrounding the list element.
From here explaining padding and margin is pretty simple.
Let’s assume you have given a width of 50px for the list element.

Padding:
It specifies the space between the content and the border. Individual padding values for top, right, bottom or left side of the box can be given. Now in the above example if you give,
padding: 10px;
It makes sure that there is 10px space on all four sides of the box, between the content and the border.
Note: It adjusts the total size so that the width of the content doesn’t get affected. Imagine the box getting bigger !!

Margin:
Padding affects our box. Whereas margin affects things around our box. Imagine margin as some imaginary force pushing objects around our box so that there is always some free space between our box and other boxes.
The margin values you give determine to what extent other objects get pushed.
margin:20px;
It makes sure that no other object is within 20px range (calculated from border) of our box.

Here am showing three images to make it better to understand what i said above,
pic 1: Shows our box with only border.
pic 2: Padding is added (look how only the box gets bigger and the content doesn't shrink)
pic 3: margin is added ( look how objects near our box gets pushed... actually our box moves to the right to accommodate the margin change)