Explain the CSS box model

Every element in HTML is rendered as a rectangular box. The CSS box model describes the four layers that determine how much space that box actually takes up: content, padding, border, and margin.

Although it may not seem obvious when viewing a web page, every element in HTML can be considered a rectangular box.

Say your page contains a heading using the <h1/> element. That's a rectangular box. The paragraph of text beneath it, that's a rectangular box. And if those two elements are wrapped inside a <div/>, well, that means your two smaller boxes are inside one larger box.

Calculating the size of each of these boxes requires more than just measuring the width and height of the content.

The box model consists of four distinct layers that determine the total size of an element:

An important detail to understand is that by default, when you set a width/height on an element, it only controls the content box. The actual space the element takes up will be:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

/*
 * Total width the element occupies:
 *   content:  200px
 * + padding:  20px left + 20px right = 40px
 * + border:   5px left + 5px right = 10px
 * = Rendered width: 250px
 * + margin:   10px left + 10px right = 20px
 * = Total space occupied: 270px
 */

This means if you set width: 200px and add padding: 20px and border: 5px, the element is actually 250px wide on screen. This catches many developers off guard.

This is why many developers use box-sizing: border-box in their CSS resets. It makes the width property include padding and border, which leads to more predictable layouts.

/* Universal reset — used by virtually every modern project */
*, *::before, *::after {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

/*
 * With border-box:
 *   Total rendered width = 200px (what you set)
 *   Content area shrinks to: 200 - 40 (padding) - 10 (border) = 150px
 *
 * The width you set is the width you get. Much more intuitive.
 */

With box-sizing: border-box, the width and height you set include the content, padding, and border (but not margin).

There's an important quirk of the box model that trips people up: vertical margins between adjacent block-level elements collapse. Instead of adding together (20px + 30px = 50px), the browser uses only the larger value. In the example below, you might expect 50px of space between the heading and paragraph, but you'll only get 30px.

.heading {
  margin-bottom: 20px;
}

.paragraph {
  margin-top: 30px;
}

/*
 * You might expect 50px of space between them (20 + 30).
 * But the actual gap is 30px — the larger margin wins.
 * This is called "margin collapsing."
 */

Margin collapsing only happens with vertical margins on block-level elements. It does NOT happen in these cases:

The box model is foundational CSS knowledge. Interviewers ask this to verify you can debug layout issues, understand why elements don't size as expected, and know the practical difference between content-box and border-box. If you can explain margin collapsing too, that signals deeper CSS understanding beyond the basics.