HTML/CSS box model refresher or primer ASCII art

When you are trying to use CSS, you REALLY need to understand clearly the HTML formatting model. There are two kinds of elements in HTML/CSS: block and inline. Both of them are modeled as boxes.

Put this ASCII art at the top of your CSS file as a reminder of exactly what is meant by padding, border, margin, width, and height.

/* CSS refresher (or primer)

..............................................
:         (1)Margin                          :
:    ---------(2)Border------------------    :
:(1) |               (3)Padding         | (1):
:    |       This is the Content        |    :
:   (2)      of the element "box"      (2)   :
:    |       that represents each       |    :
:    |  (3)      html element.     (3)  |    :
:    |                 (3)              |    :
:    ------------(2)---------------------    :
:           (1)                              :
:.............................................

         |<-Element width-->|           
 |<------IE 5 Element width---------->|  <<===Aren't you glad we are past those days now?
<----------Parent element 'width'---------->

1. Margin, 2. Border, 3. Padding

*/