The Box Model.

1. An HTML page is made up of boxes.
   1. The body is a box.
   2. Divs and paragraphs are boxes.
   3. Many other elements make boxes.
2. Boxes have contents, but some other parts as well.
   The Margin Area

   The Border Area

   The Padding Area

   The Contents
   1. The padding and margins are just space.
   2. The border is a line that may have a color or a pattern.
   3. If the contents has a background color, it extends into the padding area as well.
   4. The margin area is transparent.
   5. The contents might text (e.g. the contents of a a paragraph), or another box, or all sorts of combinations.
3. The size of the box
   1. The height and width properties apply to the height and width of the content area, and the other things take additional space.
   2. This is kind of a pill when you want to make a box which is the full width of its container, since width: 100% won't leave room for any padding, margins or border.
   3. In CSS3, you can say box-sizing: border-box, which means the size is applied to the border area. Much better for fitting tightly into your containiner.
4. Setting margins.
   1. Set all margins: margin: dimension
   2. Set sides individually: margin−left: dimension, margin−top: dimension margin−bottom: dimension, margin−right: dimension
   3. Any of the previously mentioned dimensions may be used. Percentages are of enclosing box.
5. Setting padding.
   1. Set all margins: padding: dimension
   2. Set sides individually: padding−left: dimension, padding−top: dimension, padding−bottom: dimension, padding−right: dimension.
   3. No collapse in padding; only in margins (and only vertically).
6. Setting the border.
   1. Three properties: width, style, and color.
   2. Four sides, which can have their borders set differently.
   3. Several bajillion attributes that can set different combinations of these.
      1. border: 2px dashed green: Set them all at once.
      2. border-top-style: dotted: Set the style of the top border.
      3. border-width: 3pt: Set the width of all borders.
         3pt solid blue

         2px dashed green

         6pt dotted orange

         groove

         1em green outset

         5px ridge #ffeedd

         5pt brown double

         inset

         blue outset
         Maybe don't overdo it.
   4. Styles include none to turn off the border, and hidden to make it take up space, but not appear.
   5. Widths include all the usual dimensions, plus thin, medium and thick.
   6. There is a newer (CSS3) border-radius propery which allows for rounded corners.
      1. border−radius: dimension, border−top−left−radius: dimension, etc.
      2. The dimension is the radius of the quarter-circle that will replace the sharp corner. The larger, the less sharp the curve.
      3. Can set all corners the same, or vary, which may create some interesting shapes.
   [ Box Model Source ]
7. Margin collapse.
   1. When two boxes are stacked, they are separated by the larger of the margins.
   2. When two boxes are adjacent left to right, they are separated by the sum of their margins.
   3. I didn't make that up, and it's not my fault.
   [ Border Collapse Source ]