The Box Model

Words look right, colors are painted. Now let's give the whole box some room to breathe.

Every element is a picture frame

Every HTML element the browser draws is built from the same four layers, whether you asked for them or not — like a photo on a wall:

• The content is the photo itself — your text, your image.
• The padding is the mat board around the photo — space inside the frame, between the content and the frame's edge.
• The border is the frame itself — a visible (or invisible) edge around the padding.
• The margin is the gap you leave on the wall around the frame — space outside it, pushing whatever hangs next to it further away.

That whole stack is called the box model, and it applies to every element on the page, not just ones you deliberately style this way.

padding, border, and margin, up close

.card {
  padding: 20px;
  border: 3px solid chocolate;
  margin: 16px;
}

padding: 20px; pushes the card's content 20px in from its edge on every side. border: 3px solid chocolate; draws a visible 3px line around that padding — a width, a style, and a color, all in one declaration. margin: 16px; leaves 16px of clear space outside the border, between this card and whatever sits next to it.

Common mistake

Padding and margin get mixed up constantly, because they both look like "space around the box." The difference: padding is inside the border — it grows the box itself, and it takes the box's background color with it. Margin is outside the border — it's always invisible, and it only pushes neighbors away. If a background color stops short of an edge, that's padding. If two boxes just aren't touching, that's margin.

You've got a full box now: content, padding, border, margin. Next, you'll line more than one of these boxes up at once.

Exercise

Style two trail cards

Give both .card boxes below the same treatment:

- padding: 20px; - margin: 16px; - border: 3px solid chocolate;