The CSS Box Model

Every element rendered on a web page is treated by the browser as a rectangular box, and the CSS box model describes exactly how that box's size is calculated from its content outward. Mastering the box model is essential — it explains why elements sometimes overflow their containers, why margins seem to "collapse," and why two elements with the same declared width can render at different actual sizes.

The box model has four layers, from the inside out: content, padding, border, and margin. Each layer adds space around the one before it, and the box-sizing property controls whether padding and border are included in or added to a declared width.

Why it matters

Every element on a page is a rectangular box made of content, padding, border and margin. Layout bugs such as an element that is wider than you set, or two columns that will not fit side by side, come from not accounting for those layers. The box-sizing rule in this lesson is at the top of almost every professional stylesheet.

The Four Layers

Understanding each layer individually makes the full box easy to reason about.

• Content — the actual text, image, or other content, sized by width and height.
• Padding — transparent space between the content and the border; it is part of the element's background.
• Border — a visible (or invisible) line that wraps the padding and content, set with border-width, border-style, and border-color.
• Margin — transparent space outside the border, separating the element from its neighbors; margins can collapse vertically between adjacent block elements.

content-box vs. border-box

By default, box-sizing: content-box means width and height apply only to the content area — padding and border are added on top, making the element's total rendered size larger than the declared width. box-sizing: border-box changes this so that width and height include padding and border, meaning the content area shrinks to fit while the total box stays exactly the declared size. Most modern stylesheets set * { box-sizing: border-box; } globally because it makes sizing far more predictable, especially in layouts that mix padding, borders, and percentage widths.

Margin Collapsing

Vertical margins between two adjacent block-level elements collapse into a single margin equal to the larger of the two, rather than adding together. Horizontal margins never collapse. This behavior surprises many beginners: two stacked paragraphs each with margin: 20px 0 end up with only 20px between them, not 40px.

Examples

.card-content-box {
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  box-sizing: content-box; /* total rendered width = 300 + 40 + 10 = 350px */
}

.card-border-box {
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  box-sizing: border-box; /* total rendered width stays exactly 300px */
}

The content-box card renders 350px wide overall, while the border-box card renders exactly 300px wide, with its content area shrinking to accommodate the padding and border.

<!--
<p>First paragraph.</p>
<p>Second paragraph.</p>
-->

p {
  margin: 20px 0;
}

The visible gap between the two paragraphs is only 20px, not 40px, because the adjacent vertical margins collapse into the larger of the two values.

Exercise

Give the button a width of 200px, padding of 20px and a 5px solid border, and make sure its total rendered width is still exactly 200px. Then put 30px of space above it.

Expected result: a button that measures exactly 200px wide in DevTools, sitting 30px below the paragraph.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

button {
  /* TODO: width, padding and border */
  /* TODO: make the width include the padding and border */
  /* TODO: space above the button */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

button {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
  margin-top: 30px;
}

Quick quiz

Interview questions