CSS Box Model Explained: Margin, Border, Padding & Content

Every element on a webpage is a rectangular box. That box has four layers: content, padding, border, and margin. Together these four layers are called the CSS box model — and understanding it is the single most important prerequisite for controlling layout in CSS.

If your layouts ever look wrong, if elements overlap unexpectedly, or if spacing never quite adds up — the box model is almost always the explanation.

The Four Layers of the Box Model

Working from the inside out:

┌──────────────────────────────────┐
│             MARGIN               │
│  ┌────────────────────────────┐  │
│  │           BORDER           │  │
│  │  ┌──────────────────────┐  │  │
│  │  │       PADDING        │  │  │
│  │  │  ┌────────────────┐  │  │  │
│  │  │  │    CONTENT     │  │  │  │
│  │  │  └────────────────┘  │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

1. Content — the actual text, image, or other content
2. Padding — transparent space inside the border, between the content and the edge
3. Border — a line around the padding and content
4. Margin — transparent space outside the border, separating the element from others

Content

The content area is sized by width and height:

.box {
  width: 300px;
  height: 150px;
}

By default, width and height refer only to the content area — not including padding or border. This is the source of a lot of confusion (and the reason box-sizing: border-box exists, covered below).

Padding

Padding adds space between the content and the border. It's inside the element and takes on the element's background colour.

.card {
  padding: 1.5rem;               /* all four sides */
  padding: 1rem 2rem;            /* top/bottom | left/right */
  padding: 0.5rem 1rem 1.5rem;   /* top | left/right | bottom */
  padding: 1rem 2rem 1.5rem 1rem; /* top | right | bottom | left (clockwise) */
}

Padding cannot be negative.

Border

The border sits between the padding and margin. It requires three values:

.box {
  border: 2px solid #333;
  /* width | style | color */
}

Border Styles

border-style: solid;   /* solid line */
border-style: dashed;  /* dashed line */
border-style: dotted;  /* dotted line */
border-style: none;    /* no border */

Border Radius

border-radius rounds the corners:

.card {
  border-radius: 8px;    /* all corners */
  border-radius: 50%;    /* circle (on a square element) */
}

Margin

Margin creates space outside the element, between it and its neighbours. It is always transparent — it never takes on the element's background colour.

.section {
  margin: 2rem 0;       /* top/bottom: 2rem, left/right: 0 */
  margin-bottom: 1.5rem;
}

Auto Margins

Setting margin: 0 auto is the classic technique for horizontally centring a block element:

.container {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;  /* 0 top/bottom, auto left/right = centred */
}

Margin Collapse

When two vertical margins meet — the bottom margin of one element and the top margin of the next — they collapse into a single margin equal to the larger of the two:

.paragraph-one { margin-bottom: 2rem; }
.paragraph-two  { margin-top: 1rem; }

/* The actual space between them is 2rem, not 3rem */

Margin collapse only happens vertically (top/bottom), not horizontally. It doesn't happen inside a flex or grid container, when there's padding or border between the elements, or when one element is absolutely positioned.

box-sizing: The Most Important CSS Reset

By default, width and height only apply to the content area. Adding padding and border makes the element larger than you specified:

/* Default behaviour (box-sizing: content-box) */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}
/* Actual rendered width: 200 + 20 + 20 + 2 + 2 = 244px */

The fix is box-sizing: border-box:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}
/* Actual rendered width: 200px exactly */

With border-box, width means "the total rendered width including padding and border." Apply it globally at the top of every CSS file:

*,
*::before,
*::after {
  box-sizing: border-box;
}

This is standard practice in virtually every modern CSS codebase and framework.

Inspecting the Box Model in DevTools

Every browser's developer tools have a box model visualiser. In Chrome: right-click any element → Inspect, then in the Styles panel scroll to the bottom to see a colour-coded box diagram showing the exact margin, border, and padding values for the selected element.

This is invaluable for debugging unexpected spacing. If an element is bigger or smaller than expected, the DevTools box model view will show you exactly why.

Practical Example

/* Good baseline reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* A card component */
.card {
  width: 320px;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  background-color: #fff;
}

.card h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

With this CSS, every .card element has an exact 320px total width (thanks to border-box), 1.5rem of breathing room between its content and its edge, a subtle border and rounded corners, and 1.5rem space below before the next element.

Previous: Lesson 6 — CSS Fundamentals | Next: Lesson 8 — CSS Flexbox

Part of the HTML & CSS Fundamentals course.

External references:

• Chrome DevTools — Inspect and debug CSS layout guide