The Box Model

The idea

Think of a picture in a frame on a wall: padding is the mat board between the picture and the frame, the border is the frame itself, and margin is the empty wall space between this framed picture and the next one.

What it actually is

Every HTML element is wrapped in an invisible box with four adjustable layers: the content itself, padding (space INSIDE the border, between the border and the content), the border (a visible line around the padding), and margin (space OUTSIDE the border, between this box and its neighbors).

How you write it

selector {
  padding: 10px;               /* space inside the border */
  border: 2px solid black;     /* width, style, color */
  margin: 20px;                /* space outside the border */
}

A worked example

p {
  padding: 10px;
  border: 3px solid black;
}

padding: 10px; pushes the paragraph's text 10 pixels away from its border on every side. border: 3px solid black; then draws a visible 3-pixel solid black line around that padded area - three values in one declaration: width, style, color.

p {
  margin: 30px;
}

margin works on the OUTSIDE of the box instead - it pushes other elements away from this one, creating empty space between them, without changing anything about the box's own visible size the way padding does.

Mistakes children actually make

Mistake 1: confusing padding (inside, pushes the CONTENT away from the border) with margin (outside, pushes OTHER ELEMENTS away) - this is the single most common box-model mix-up. Mistake 2: writing border: solid; alone with no width or color - it often still shows something using defaults, but a full border: 2px solid black; (width, style, color, in that order) is the reliable pattern to learn first. Mistake 3: expecting margin: 20px; on two stacked elements to add up to 40px of gap between them - adjacent vertical margins actually collapse to just the LARGER of the two, not their sum, a well-known box-model surprise.

Then they try it

In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Give the paragraph 20px of padding and a 2px solid black border. The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.