Premise: 20px padding, 3px black border, 10px margin, 70% width.
Note that since this page is a proof of concept rather than an attempt at visualising the different box models, margins are invisible. This means, for example, that if the container box has a margin (as it does in all variants but margin-box), the margin will render, but not in the background colour associated with the container box. While the colouring is supposed to help easy grasping of the concept, the real gem of this page is the source code between the style tags.
If you came here looking for a quick visualisation of the box models, try this instead: http://onomatopoeia.pinkgothic.com/images/25.png
Still, for the sake of argument...
Note: Only the margin-box model is not entirely cross-browser compatible. Internet Explorer expands the container's height in accordance to the margin of the inner box, whereas FireFox and Opera both don't adjust the height, but honour the margin. This is only relevant if your container is more than a helper box, and contains a background colour (as it does here) or a background image. IE will show the background colour (or image) in the thin strip above and below the box, whereas Opera and FireFox will not.
