CSS Step 1: The Box Model

The CSS Box Model is pretty straight forward. I think I understand what is going on.

The box model pretty much talks about the borders which surround objects. These objects can be anything from pictures to text to other boxes. The box model also describes how these boxes can be positioned relatively, absolutely, statically or just in a normal flow layout to others boxes.

Each box which surrounds an element has four areas, starting from inside out:
1. The Content Area
2. Padding Area
3. Border Area
4. Margin Area

Worth noting:
- The margin edge height of a box depends on its content height, plus the top and bottom padding.
- The content width for each box is calculated top-down (note sure what this means exactly).
- Margins of boxes are always transparent. Keep in mind then creating a flow layout.

Calculating Widths and Margins:
For Absolutely positioned, non-replaced elements

The width of a containing block is equal to

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right'

More Details...
I often have this problem of determining how wide a box is. Sometimes I feel it is good that I set a with or height to auto, so the margin can automatically adjust but then I run in to problems in the long run. This is because I am not taking into account the margins and padding or wether I have the left or right attribute applied.