The CSS box model has been misunderstood for years. I think that the main problem with the CSS specification lies in the fact that borders, margins and padding are treated as separate arguments from width and height properties. Take a look at this picture for example:
It's still hard for web developers to figure out what happens when height and width measures are added to this model. Basically, you have to think it along two axes, horizontal (width) and vertical(height). For the first you have to sum up left and right margins, borders and padding plus width; for the latter, instead, the overall measure is given by the sum of top and bottom margins, borders and padding plus height. These are the measures of the whole containing block.
Remember that also when you use the top, right, bottom and left properties of positioning you add other measures to the mix. Be careful then!