LESSON 11

The Box Model

Learning objective: Understand content, padding, border, and margin.

Understand

Every element is a box made of four layers.

From inside out: content, then padding (space inside the border), then the border, then margin (space outside). Setting box-sizing: border-box makes width include padding and border, which is far easier to reason about.

Analogy: An element is like a framed picture: the photo (content), the mat (padding), the frame (border), and the gap to the next frame (margin).

See It in Action

A predictable box:

* { box-sizing: border-box; }
.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 16px;
}
How it works: With border-box, the card stays 200px wide even after padding and border are added, so layouts stay predictable.

Try It Yourself

  1. Add padding, border, and margin to a box.
  2. Toggle box-sizing: border-box and watch the width behave.
  3. Use browser dev tools to see the box model diagram.

Quick Quiz

Which layer is the space OUTSIDE the border?

Challenge

Build a card and label which spacing is padding and which is margin.

Success condition: You can identify content, padding, border, and margin on your card.