The CSS Box Model

Understand content, padding, border, margin — and why box-sizing: border-box changes everything

Knowledge0%

Learn & Drill

Fluency0%

Drill & Speed

Retention0%

Mastery & Review

Confidence0%

All modes

Practice

Knowledge

Fluency

Retention

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

CSS Selectors & Specificity0%

Explanation

Every HTML element is a rectangular box. The box model describes the four layers that make up that box.

The four layers (inside out):

┌──────────────────────── margin ───────────────────────────┐
│  ┌─────────────────── border ───────────────────────────┐  │
│  │  ┌──────────────── padding ──────────────────────┐  │  │
│  │  │                                                │  │  │
│  │  │              content (width × height)          │  │  │
│  │  │                                                │  │  │
│  │  └────────────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────┘

css

.box {
  width: 200px;       /* content width */
  height: 100px;
  padding: 16px;      /* space inside the border */
  border: 2px solid black;
  margin: 24px;       /* space outside the border */
}

The box-sizing problem:

By default (box-sizing: content-box), width only sets the content area. Padding and border add to the total size:

Total width = 200 (content) + 16+16 (padding) + 2+2 (border) = 236px

This makes layout math painful. Fix it globally: ``css *, *::before, *::after { box-sizing: border-box; /* width/height now include padding + border */ }

With border-box, a width: 200px element is always 200px total — padding and border fit inside.

Shorthand values:

css /* 1 value: all 4 sides */ margin: 16px; /* 2 values: top+bottom, left+right */ margin: 8px 16px; /* 3 values: top, left+right, bottom */ margin: 8px 16px 4px; /* 4 values: top right bottom left (clockwise) */ margin: 8px 16px 4px 0;

Margin collapse:

Adjacent vertical margins (top/bottom) between block elements collapse into the larger of the two: ``css p { margin-bottom: 16px; } h2 { margin-top: 24px; } /* Space between them = 24px, not 40px */ `` Horizontal margins do NOT collapse. Margin collapse only happens vertically between block elements.

Display types:

css display: block; /* Full width, starts new line — <div>, <p>, <h1> */ display: inline; /* Width = content, no height/vertical-margin control — <span>, <a>, <strong> */ display: inline-block; /* Inline flow but accepts width/height/vertical-margin */

Examples

Global border-box reset + basic card

The global `border-box` reset is the single most impactful CSS default to change — it makes every width/height value predictable

/* Always add this at the top of your CSS */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 24px;        /* inside space */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin: 16px auto;    /* 16px top/bottom, centered horizontally */
}

/* With border-box: card is exactly 300px wide.
   Without border-box: card would be 300 + 48 + 2 = 350px wide */

.card__title {
  margin-top: 0;        /* remove default h2 top margin */
  margin-bottom: 8px;
}

.card__body {
  margin: 0;
}

Spacing with padding vs margin

Padding = internal spacing, margin = external spacing. `margin: 0 auto` only centers block elements with a set width

/* Use padding for space INSIDE a container (between content and border) */
.button {
  padding: 8px 16px;  /* breathing room inside the button */
  background: #6366f1;
}

/* Use margin for space OUTSIDE an element (push away from neighbors) */
.button + .button {
  margin-left: 8px;   /* space between consecutive buttons */
}

/* Center a block element horizontally */
.container {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;    /* auto left+right margin = centered */
}

/* Vertical margin collapse demo */
.section-title { margin-bottom: 24px; }
.section-body  { margin-top: 16px; }
/* Gap between them = 24px (larger wins), not 40px */

How well did you understand this?

Next in CSS & Styling

CSS Flexbox

Continue

Unlocks

CSS Flexbox CSS Grid