The Box Model

Every Element is a Box

One of the most important mental models in CSS is that every HTML element is a rectangular box. Even a line of text, an image, or a button — each is a box. The CSS Box Model defines how that box is structured and how much space it takes up on the page.

Understanding the box model is the key to controlling spacing and layout precisely.

The Four Layers of the Box Model

Each box has four layers, from innermost to outermost:

+-------------------------------+
|           MARGIN              |  ← Space outside the border
|  +------------------------+   |
|  |        BORDER          |   |  ← The visible border line
|  |  +-----------------+   |   |
|  |  |    PADDING      |   |   |  ← Space between content and border
|  |  |  +-----------+  |   |   |
|  |  |  |  CONTENT  |  |   |   |  ← Text, image, or other content
|  |  |  +-----------+  |   |   |
|  |  +-----------------+   |   |
|  +------------------------+   |
+-------------------------------+

• Content — the actual content of the element (text, image, etc.)
• Padding — transparent space between the content and the border
• Border — a line that wraps around the padding and content
• Margin — transparent space outside the border, separating the element from neighbours

Controlling Each Layer

Padding

Padding creates breathing room inside the element:

.card {
  padding: 24px;            /* same on all four sides */
  padding: 16px 24px;       /* 16px top/bottom, 24px left/right */
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Border

The border sits between the padding and the margin:

.card {
  border: 1px solid #E5E7EB;    /* width style colour */
  border-radius: 12px;          /* rounds the corners */
  border-bottom: 3px solid #42BCB1; /* only the bottom border */
}

Margin

Margin pushes other elements away from the outside:

.card {
  margin: 24px;             /* same on all four sides */
  margin: 0 auto;           /* 0 top/bottom, auto left/right — centres the element */
  margin-bottom: 16px;
}

box-sizing: border-box

By default, CSS calculates an element's total width like this:

Total width = content width + padding-left + padding-right + border-left + border-right

This is called content-box sizing and it causes a frustrating problem: setting width: 300px and then adding padding: 24px makes the element 348px wide instead.

The fix is box-sizing: border-box:

* {
  box-sizing: border-box;
}

With border-box, padding and border are included inside the declared width. A width: 300px element with padding: 24px stays exactly 300px wide — the padding comes out of the content area.

Every professional project uses this. Put it at the top of your CSS file.

A Real-World Example

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card {
  width: 320px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  margin: 24px auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card h2 {
  font-size: 1.25rem;
  color: #181A20;
  margin-bottom: 8px;
}

.card p {
  font-size: 0.9rem;
  color: #6B7280;
  line-height: 1.6;
}

<div class="card">
  <h2>Frontend Engineering</h2>
  <p>Learn to build beautiful, responsive websites from scratch.</p>
</div>

Collapsing Margins

An important quirk: when two vertical margins meet (for example, the bottom margin of one paragraph and the top margin of the next), they collapse into a single margin equal to the larger of the two.

p { margin-bottom: 16px; }
h2 { margin-top: 24px; }
/* The gap between the paragraph and heading will be 24px, not 40px */

This does not happen with horizontal margins or inside elements with padding or flexbox/grid.

Inspecting the Box Model

In any browser, you can right-click an element and choose Inspect to open the developer tools. The Computed tab shows a diagram of that element's exact content, padding, border, and margin values. This is one of the most useful tools for debugging layout issues.

Practice Exercise

Build a notification card from scratch:

1. Apply box-sizing: border-box globally
2. Create a .notification card with white background, border, border-radius, and padding
3. Add a .notification-title with a teal colour and bottom margin
4. Add a .notification-body paragraph with grey text
5. Give the whole card a bottom margin to separate it from other elements