Boxes and spacing · Code with Martin

Discover the biggest secret in CSS: everything on a page is a box. And learn to move them around.

Show me: everything is a box

Here’s the biggest secret in web design: every single thing on a page is a rectangular box. A heading, a paragraph, an image, a menu – all of it. Once you learn to see that, all of CSS clicks into place.

Every box has three kinds of space around it:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – the cushion: space between the content and the border (inside the box)
border – the box’s frame
margin – space between the box and its neighbors (outside the box)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Show me: a page like the pros build

You’ve seen this on real websites – the content isn’t stretched across the whole wide screen, it stays in a comfortable column in the middle. Three lines of CSS do that:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto is a magic formula: zero on top and bottom, “automatically equal” on the sides – meaning centered. Almost every website in the world uses this rule.

And let’s tame images too, so they never spill out of the page:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Your turn 💪

This task is the same for every project – it’s a universal outfit for any website:

Center your content: the max-width + margin: 0 auto rule on main.
Tame your images with the img rule from the example.
Improve your badge from the last lesson: add margin so it has some breathing room.
Let the page breathe: add body { line-height: 1.6; } – lines of text spread out nicely.

Complete solution (works for every project)

Add this to style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

And to your badge (yours might be called .news, .favorite, .tip, or .win), add this line:

  margin: 20px 0;

💡

Try making the boxes visible! Add this rule to your CSS for a moment: * { border: 1px solid red; } – the asterisk means “absolutely everything”. Suddenly you’ll see every box on the page. Then delete it again, but remember that view: that’s how the browser sees your page.

✅

Check yourself: Your content sits in a comfortable centered column, photos have rounded corners and don’t spill anywhere, text is easy to read. Shrink your browser window – the content adjusts. Your website suddenly looks a class better.

What to take away from this lesson

Everything on a page is a box with padding (inside), border (frame), and margin (outside).
max-width + margin: 0 auto = a centered column of content, just like real websites.
img { max-width: 100%; } – photos never spill out.