---
title: "Box Model"
slug: "box-model"
category: "glossary"
tags: ["glossary", "css", "box-model", "layout", "sizing", "frontend"]
status: "stable"
last_updated: 2026-08-14
summary: "CSS box model describes every element as a rectangle with content, padding, border, and margin areas that interact with width and height."
related:
  [
    "[[glossary/layout-shift]]",
    "[[glossary/cascade]]",
    "[[glossary/specificity]]",
    "[[glossary/em-vs-rem]]",
    "[[frontend/css]]",
    "[[glossary/viewport]]",
  ]
---

## Overview

This page is the atomic definition. Full CSS layout guidance lives at [[frontend/css]]. Every rendered element is a rectangle built from nested content, padding, border, and margin areas, and `box-sizing` controls whether `width`/`height` measure the content box or the full border box.

## Definition

Every element in CSS is rendered as a rectangular box composed of four nested areas, from inside out: content, padding, border, and margin. The `width` and `height` properties apply to the content area by default (`box-sizing: content-box`). Setting `box-sizing: border-box` makes `width` include padding and border, which is almost always preferable because sizing becomes predictable.

Key measurements:
- Content box: the drawable area for text, images, and child elements.
- Padding: transparent space between content and border; clicks hit padding.
- Border: the drawn edge; width, style, and color are independent.
- Margin: transparent space outside the border; margins of adjacent block-level elements collapse (the larger wins, they do not add).

Margin collapsing happens between sibling block elements and between a parent and its first or last child when no border or padding separates them. Flex and grid containers suppress margin collapsing for their direct children.

## When it applies

Apply border-box sizing globally with `*, *::before, *::after { box-sizing: border-box; }` at the top of every stylesheet. This prevents the classic bug where adding padding to a sized element makes it overflow its container. Margin collapsing is the other common surprise: use padding on the parent or set `overflow: auto` to break collapsing between parent and child.

## Example

```css
/* content-box: actual rendered width = 200 + 20 + 20 + 2 + 2 = 244px */
.box-content { width: 200px; padding: 20px; border: 2px solid; }

/* border-box: actual rendered width = 200px exactly */
.box-border { box-sizing: border-box; width: 200px; padding: 20px; border: 2px solid; }
```

## Related concepts

- [[glossary/layout-shift]] - unexpected box-model changes cause cumulative layout shift (CLS).
- [[glossary/em-vs-rem]] - relative units interact with box model sizing.
- [[glossary/viewport]] - the viewport is the outer frame that block elements size against.
- [[frontend/css]] - the full CSS deep-dive including layout modes.
- [[glossary/cascade]] - box-sizing is resolved through the normal cascade.

## Citing this term

> See [[glossary/box-model|Box Model]] (llmbestpractices.com/glossary/box-model).

## Related

- [[glossary/layout-shift]]
- [[glossary/cascade]]
- [[glossary/em-vs-rem]]
- [[frontend/css]]
- [[glossary/viewport]]