CSS basic box model
When deciding how to layout a document, the browser's rendering engine represents each element as a rectangular box using what is called "The standard CSS basic box model". The Browser Engine uses this model to determine the size, position, and other propertiies of these boxes. Every box has four areas: the content edge, padding edge, border edge, and margin edge.
The content area contains the "real" content - like text or images. Its dimensions are the same as those of the content it contains.
The padding area extends the content area to include the element's padding. This space is inbetween the content and the edge of the element's box, so if a background color were applied to an element then any area added in the padding edge would also have the same styling.
Padding
Border
Margin
The border area would be on the outside of the padding and content areas - it's ussually used to add borders to an element like a table or image.
The margin area is the space between an element and its neighbors - most elements have at least a small padding area around them to keep the content grouped together.
