CSS Box Model
A web page is essentially made up of a series of boxes, each box containing an HTML element - the boxes are not always apparent but every element that you can see generates its own box. In the normal flow of a document these boxes run from the top to the bottom of the page and govern the visual layout of the elements.
In CSS 2.1 each box has a content area containing text, an image or other content and each box can also have optional padding, borders and margins. The way these properties relate to each other and the element content is shown in this diagram:
In essence the box generated by an element can include from one to four boxes - depending on how many of the CSS padding, border and margin properties have been set. If all three properties have been given values then the width of an element is calculated as follows:
margin-left + border-left + padding-left + content width + padding-right + border-right + margin-right
Similarly the height of the box generated by an element can be calculated:
margin-top + border-top + padding-top + content height + padding-bottom + border-bottom + margin-bottom
NOTE: Don't confuse width and height for generated boxes with the CSS width and height properties which only apply to the element content area and not to the borders, padding or margins.