From CSS Discuss
Understanding the CSS Box Model is essential to successful layouts. People can argue endlessly about whether the width of the box should be the total width of the whole thing, or just the width of the content. While we can disagree about what we would like it to be, the W3C wrote the spec and they say width is the width of the actual contents, and to that is added padding, then borders, then margins.
It helps to have illustrations. Here is a collection of illustrations that all say about the same thing, but offer different ways of visualizing the box model.
- The W3C spec - http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
- Brain Jar's two dimension illustration - http://www.brainjar.com/css/positioning/default.asp
- Jon Hick's EXCELLENT three dimension illustration - http://www.hicksdesign.co.uk/boxmodel/
- Douglas Livingstone's interactive version - http://www.redmelon.net/tstme/box_model/
- Tom Dell'Aringa's b/w version - http://www.pixelmech.com/notebook/2004/05/3d-box-model-in-black-and-white
They will give you an interactive box model diagram of any element on a page. This is an invaluable tool for learning and debugging.
Original by Bob Easton . Please feel welcome to update and extend.