Box Model

ELI5 — The Vibe Check

The box model is how CSS thinks about every element on a page — as a box with four layers: content, padding, border, and margin. Padding is the space inside the box, margin is the space outside. Understanding this ends 90% of 'why is there extra space here?' confusion.

Real Talk

The CSS box model describes the rectangular boxes generated for elements in the document tree. Each box has: content (width/height), padding (inner spacing), border (outline), and margin (outer spacing). box-sizing: border-box makes width/height include padding and border, which is the modern standard.

Show Me The Code

/* Always add this to your CSS reset */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;      /* total width INCLUDING padding+border */
  padding: 1.5rem;   /* space inside, won't add to width */
  border: 2px solid #ccc;
  margin: 1rem;      /* space outside the box */
}

When You'll Hear This

"Open DevTools and check the box model diagram — your padding is causing the overflow." / "Always use box-sizing: border-box so padding doesn't break your widths."