The box model: content, padding, border, and margin

Every real element on a page is, underneath any visual styling, a rectangular box — and every one of those boxes is made of the same four real layers. Understanding this precisely is what makes real layout math predictable instead of a series of surprises.

The four real layers, from the inside out

margin   → real, transparent space OUTSIDE the border, pushing
             other elements away
border   → a real, visible (or invisible) line around the padding
padding  → real space INSIDE the border, between it and the content
content  → the real text or child elements themselves

.product-card {
  padding: 1.5rem;
  border: 1px solid #ddd;
  margin: 1rem;
}

Applied to a real Bright Leaf Coffee product card, this real declaration adds 1.5rem of breathing room inside the card (between its border and the product text), a visible 1px border, and 1rem of space outside the card separating it from neighboring elements.

The real sizing bug almost everyone hits early

.product-card {
  width: 300px;
  padding: 1.5rem;
  border: 1px solid #ddd;
}

Actual rendered width with the default box-sizing:
  300px (content) + 2 × 1.5rem (padding) + 2 × 1px (border) = 348px

By CSS's real, historical default (box-sizing: content-box), width sets only the content box's width — padding and border get added on top, so a card declared 300px wide actually renders 348px wide. This is a genuinely common source of real layout bugs, especially once several boxes with different padding are meant to line up to the same real width.

The real, practical fix: box-sizing: border-box

* {
  box-sizing: border-box;
}

.product-card {
  width: 300px;
  padding: 1.5rem;
  border: 1px solid #ddd;
}

Actual rendered width with border-box:
  300px, full stop — padding and border are subtracted from the
  content area instead of added on top of the declared width

With box-sizing: border-box, the declared width becomes the real, total rendered width including padding and border — the content area shrinks to accommodate them instead. This single, universal rule (applied with the * selector, matching every element) is genuinely one of the most common real "reset" rules in production CSS, precisely because content-box math is rarely what real layout work actually needs.

Shorthand vs. longhand: real flexibility in how much to specify

/* shorthand: all four sides at once */
.product-card {
  margin: 1rem;
}

/* shorthand: vertical, then horizontal */
.product-card {
  margin: 1rem 1.5rem;
}

/* shorthand: top, right, bottom, left (clockwise) */
.product-card {
  margin: 1rem 1.5rem 2rem 1.5rem;
}

/* longhand: one side at a time */
.product-card {
  margin-top: 1rem;
  margin-right: 1.5rem;
  margin-bottom: 2rem;
  margin-left: 1.5rem;
}

The same real shorthand patterns apply identically to padding and border. Shorthand is genuinely more concise for the common real case of uniform or near-uniform spacing; longhand is worth reaching for when only one specific side actually needs adjusting, since it keeps the change's real intent obvious at a glance.

Margin collapsing: a real, genuinely surprising behavior

h2 { margin-bottom: 2rem; }
p  { margin-top: 1.5rem; }

Expected gap between a real <h2> and the <p> right after it: 3.5rem
Actual real gap: 2rem — the larger of the two margins, not the sum

Adjacent vertical margins between real block-level elements collapse into a single margin equal to the larger of the two, rather than adding together — a genuinely surprising real behavior the first time it's encountered, and worth knowing about explicitly rather than debugging as if it were a bug. It only applies to vertical margins between certain elements in normal document flow — it doesn't apply to padding, and doesn't apply once an element is part of a flex or grid layout, covered in parts 9 through 12.

Next: colors, units, and real CSS custom properties — building Bright Leaf Coffee's actual design tokens.