The CSS Box Model

Understand how every HTML element is a box made of content, padding, border, and margin.

Overview

Every element on a web page is a rectangular box. CSS uses the box model to describe the space an element takes up and the layers around its content. The box model has four layers, from inside to outside: 1. **Content** the actual text, image, or element inside 2. **Padding** transparent space between content and the border 3. **Border** a line around the padding (can be colored, styled, and sized) 4. **Margin** transparent space outside the border, separating the element from neighbors By default, CSS uses the `content-box` model: `width` and `height` apply only to the content area. Padding and border are added on top. This often causes surprising sizing issues. The fix is to use `box-sizing: border-box` globally. With border-box, `width` includes padding and border, so `width: 300px` always means the element is exactly 300px wide, regardless of padding or border.

Key Points

•Every element is a box with 4 layers: content, padding, border, margin
•Default box-sizing: content-box width/height is just the content area
•box-sizing: border-box width/height includes padding and border (much easier)
•Padding is inside the border (inherits background-color)
•Margin is outside the border (always transparent)
•Margin collapse: top/bottom margins of adjacent blocks merge into one

Examples

The box model in action

.box {
  width: 300px;        /* content width */
  padding: 20px;       /* space inside the border */
  border: 2px solid black;
  margin: 16px;        /* space outside the border */
}

/* With content-box (default):
   Total rendered width = 300 + 20 + 20 + 2 + 2 = 344px

   With border-box:
   Total rendered width = 300px (padding and border fit inside) */

Apply border-box globally (recommended reset)

/* Paste this at the top of every stylesheet */
*, *::before, *::after {
  box-sizing: border-box;
}

This one rule fixes the most common box-model surprise. Include it in every project.

Visualizing the layers

.card {
  /* Content area */
  width: 320px;

  /* Padding: breathing room inside */
  padding: 24px;

  /* Border: visible edge */
  border: 1px solid #e2e8f0;
  border-radius: 8px;

  /* Margin: distance from other elements */
  margin-bottom: 16px;

  /* Makes width: 320px total including padding + border */
  box-sizing: border-box;
}

Common Mistakes

Forgetting that default content-box adds padding/border on top of width elements are wider than expected
Not adding box-sizing: border-box globally causes layout headaches throughout the project
Confusing padding (inside, colored) with margin (outside, transparent)

Note

Open DevTools (F12) → select an element → look at the Box Model diagram on the right. It shows the exact content, padding, border, and margin values in a visual layout.

The CSS Box Model

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

In the default content-box model, if width: 200px, padding: 20px, and border: 5px, what is the total rendered width?