CSS Box Model

Every element on a web page is a rectangular box. Understanding the rules that govern how those boxes are sized and spaced is the single most important step toward writing CSS that behaves predictably.

The Four Layers

From innermost to outermost, each box has four regions:

/*
 *  ┌─────────────────────────────────────┐
 *  │              MARGIN                 │  ← transparent, pushes other elements away
 *  │  ┌───────────────────────────────┐  │
 *  │  │            BORDER             │  │  ← visible line (or invisible if border: none)
 *  │  │  ┌─────────────────────────┐  │  │
 *  │  │  │         PADDING         │  │  │  ← space between content and border
 *  │  │  │  ┌───────────────────┐  │  │  │
 *  │  │  │  │      CONTENT      │  │  │  │  ← text, image, child elements
 *  │  │  │  └───────────────────┘  │  │  │
 *  │  │  └─────────────────────────┘  │  │
 *  │  └───────────────────────────────┘  │
 *  └─────────────────────────────────────┘
 */

• Content — where text, images, and child elements live. Sized by width and height.
• Padding — transparent space between the content and the border. Has the element’s background color.
• Border — a rendered line around the padding. Can have color, style, and width.
• Margin — transparent space outside the border. Always transparent; never has a background.

content-box vs border-box

The default box-sizing: content-box means width applies only to the content area. If you set width: 200px, padding: 20px, and border: 2px solid, the element’s rendered width is actually 200 + 40 + 4 = 244px. This is almost never what you intend.

box-sizing: border-box includes padding and border in the width value. A 200px element stays 200px no matter how much padding or border you add.

/* Apply border-box globally — include this in every project reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 24px;
  border: 2px solid #e5e7eb;
  /* Total rendered width: 300px (padding and border are inside) */
}

Margin Collapse

Vertical margins between block elements collapse — the space between two elements is the larger of the two margins, not their sum. This happens in three situations:

1. Adjacent siblings: the bottom margin of one element and the top margin of the next.
2. Parent and first/last child when there is no border, padding, or block formatting context between them.
3. An element with no content, padding, or border whose top and bottom margins collapse with each other.

/* These two paragraphs are separated by 24px, not 16px + 24px = 40px */
p { margin-bottom: 16px; }
h2 { margin-top: 24px; }

To prevent collapse: add padding, border, overflow: hidden, or display: flex to the parent.

Display Types

/* Making a span act like a block for a badge */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #10b981;
  color: white;
  font-size: 0.75rem;
}

Further Learning

Search these terms to go deeper:

• “CSS box model MDN” — the definitive reference with interactive diagrams
• “CSS margin collapse rules” — all three collapse scenarios with examples
• “block formatting context CSS” — what triggers a BFC and why it stops margin collapse
• “CSS reset vs normalize” — different approaches to establishing a predictable baseline
• “CSS logical properties” — margin-block, padding-inline and how they work with writing modes

CSS Box Model

Think of every element on a page as a framed photo on a wall. There’s the photo itself, a mat around it, the frame, and then the empty wall space keeping it away from other frames. CSS sees every element exactly this way — as a box with layers. Once you understand these layers, CSS spacing stops feeling random.

The four layers (inside to outside)

• Content — the actual text or image. This is the photo.
• Padding — space inside the box, between the content and the edge. This is the mat around the photo. It takes on the background color.
• Border — a line around the padding. This is the frame.
• Margin — invisible space outside the box that pushes other elements away. This is the gap to the next frame on the wall.

┌─────────── margin ───────────┐
│  ┌──────── border ───────┐   │
│  │  ┌──── padding ────┐  │   │
│  │  │    content      │  │   │
│  │  └─────────────────┘  │   │
│  └───────────────────────┘   │
└──────────────────────────────┘

The sizing gotcha (and the one-line fix)

By default, when you say width: 200px, that’s only the content. Add padding and a border and the box gets wider than 200px — which surprises everyone at first.

The fix is to tell CSS “include padding and border in the width I gave you”:

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

.card {
  width: 300px;
  padding: 24px;
  border: 2px solid #e5e7eb;
  /* Stays exactly 300px wide. No surprises. */
}

The margin surprise

When two stacked elements both have a vertical margin, the browser doesn’t add them together — it uses the bigger of the two. So a 16px bottom margin next to a 24px top margin gives you 24px of space, not 40px. This is called margin collapse. If it ever throws off your spacing, adding padding or display: flex to the parent stops it.

How elements sit next to each other

In one sentence

Every element is a box with content, padding, border, and margin — set box-sizing: border-box once and the numbers you write will match what you see.

Want to go deeper?

Switch to Expert mode above for the exact margin-collapse rules and how visibility: hidden differs from display: none.