Every element is a box

From lesson 4-3, one ID selector beats ten stacked class selectors.

Specificity compares buckets left to right, so (1,0,0) beats (0,10,0), and one ID outranks any number of classes.

That covers which rules apply. This unit turns to what those styled elements actually are, namely boxes.

The box model

Nearly every question of the form "why is there a gap here" or "why is this element wider than I said" is a box-model question. That is why the first thing DevTools shows about any element, in lesson 9-1, is this exact diagram.

Every element the browser draws is a rectangular box with four layers, read from the inside out.

.card {
  padding: 16px;
  border: 2px solid #d4af37;
  margin: 24px;
}

Padding is breathing room inside. Margin is personal space outside.

When two elements sit too close together, the useful first question is which of the two is meant, because padding on one and margin on the other produce the same visual gap for very different reasons.

Per-side control and shorthand

Each layer can differ per side, through padding-top, margin-left, border-bottom, and the rest. The shorthands read clockwise from the top.

padding: 8px;                /* all four sides */
padding: 8px 16px;           /* top/bottom 8, left/right 16 */
padding: 8px 16px 24px 4px;  /* top, right, bottom, left */

A missing value mirrors its opposite side, which is what makes the two-value form work.

Borders take three parts in any order, as in border: 2px solid black; for width, style, and color.

One trick worth memorizing now is margin: 0 auto;, which centers an element horizontally when it has a set width. The auto tells the browser to split the leftover space equally between left and right.

Reading a two-value shorthand

padding: 10px 20px; means 10px top and bottom, and 20px left and right.

Two values read as top and bottom first, then left and right.

The clockwise rule starts at the top and runs top, right, bottom, left, and missing values mirror their opposite side. Wider horizontal padding than vertical is the common case for buttons, which is why this exact shape appears constantly.

Computing a rendered width

By default an element's rendered width is its content width plus padding and border on both sides. Margin adds space outside but is not part of the box.

function totalWidth(content, padding, border) {
  return content + 2 * padding + 2 * border;
}

console.log(totalWidth(200, 16, 2));
console.log(totalWidth(300, 0, 1));

Output

236
302

Left padding plus right padding is 2 × padding, and the same holds for the border, so 200 + 2×16 + 2×2 = 236.

This is the arithmetic that surprises people, because a declared width: 200px produced a 236px box. The next lesson changes the rule.