Spacing & borders

Here's the idea that makes CSS layout click: every single element on a page is a rectangle. Headings, paragraphs, images, buttons — all boxes, even when they don't look like it.

Each box has four layers, from the inside out:

1. Content — the text or image itself
2. Padding — space inside the box, between content and edge
3. Border — the edge itself
4. Margin — space outside the box, pushing other boxes away

This is called the box model, and once you see it you can't unsee it.

These two get confused constantly, so here's the way to keep them straight:

• Padding pushes the content away from its own edge. More padding makes the box bigger and roomier inside.
• Margin pushes other boxes away. It's the gap between things.

A coloured box with padding shows the colour in the padded area — it's part of the box. Margin is always invisible, because it's outside the box entirely.

Inside is padding. Between is margin.