This book I'm reading now -- HTML Utopia: Designing Without Tables Using CSS -- is giving me a much better understanding of the CSS code used to create Blogger templates. It's all about boxes. Every major element on the page is just a box. You have to arrange the boxes so they play nice together.

This picture, from W3Org, diagrams it all quite nicely:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

You can think of any web page as a set of boxes.

But what keeps the boxes from overlapping or bumping into each other?

"Padding," "border" and "margin" settings are part of the secret.

It gets confusing because in CSS there are several elements that define the boxes and add to their width. If the content in your box -- your main column, let's say -- is 440 pixels wide, then that box is 440 pixels wide, right? Wrong! To get the full width, you have to include content, padding, and border. Also, don't forget the margin, which is the space between elements on the page.

Content is the image or text inside the box.

Padding is the space between the content (text or image) and the border of the box.

The Border is a line, visible or invisible, that marks the edge of the box. A wide border adds to the box width.

Margins are the space between different boxes or boxes and other elements of an HTML page.

Remember that padding is the space inside the box (between content and border) and margin is the space outside the box (between one box and another box; or between one box and the edge of the browser window).

Look at the border and padding settings on your template and play with them a bit. The structure of the web page will become more apparent to you.

Next: Positioning. "Hey, stay on the right side of the page! Why are you floating over there! Get back here!"