Box Model.

* Every element within HTML generates a box or a rectangular container around it.
* Understanding these boxes or containers is the key to creating layouts within your CSS document.
* First you have the centre of the element for which you can specify the width and height.
* This is then surrounded on all sides by the padding - if you set a background colour or image for the element it will also be applied to the padding.
* This is in turn surrounded by the border - this can also be styled.
* Finally there is a margin all the way around the border - this is invisible.
* All of the above can be styled with CSS, although by default the padding, border and margin are all set to zero.
* NB: When you add padding, a border or a margin to an element it is applied to all of the top, bottom and sides.