The Box Model
The next bit of theory you'll need to absorb is the box model. The box model dictates how CSS handles any element with the style "display: block;" applied to it (either explicitly, like a DIV, or by default like H1 and P). Each element is rendered as a box according to the following factors:
- width - this is set to "auto" by default and will take up the enitre available width
- height - this is set to "auto" by default and will take up as much space as necessary to display the content inside
- border - this specifies what kind of border the box should have
- padding - the space between the border and the content inside the box
- margin - the space between the border and another item outside it
The total size the box takes up will be (width + border + padding + margin) x (height + border + padding + margin). You might have to do some math to make your box fit in a specific space. Like if you needed to have a box with 1px border, 5px padding, and end up taking 100px from border to border, you'd have to set the width to (100 - 5 - 5 - 1 - 1) = 88px.
Margins are not cumulative. If one item has a 5px margin and the next item also has a 5px margin, they will only be 5px apart. If one was 8px and the other 3px, they'd be 8px apart.