Codectionary / Developer documentation / CSS

The Box Model

Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.

Before you start: HTML

Syntax

width, padding, border, margin

Breaking down the syntax

content
The area for text, images and child content.
padding
Space between content and border.
border
The edge surrounding content and padding.
margin
Outer space beyond the border.

How it works

Every element has a content box, with padding and a border around it. Margin creates space outside that border.

Content

The innermost area.

Padding + border

Added to a content-box width; included in a border-box width.

Margin

Outside the border and outside the declared width in both models.

Examples

See the layers

The preview card has a declared outer border-box width of 260px.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-frame{background:repeating-linear-gradient(45deg,#ecfdf5 0 8px,#d1fae5 8px 16px);padding:1px}.box,.card,.debug{background:#fff7ed;color:#431407}

.card {
  box-sizing: border-box;
  width: 260px;
  max-width: 100%;
  padding: 24px;
  border: 4px solid royalblue;
  margin: 16px 0;
}
  1. The border and padding are included in 260px.
  2. The content width is 204px when the box is 260px wide.
  3. The vertical margin is outside that box.
  4. The text is the content; padding and border contribute to the painted box.
  5. The patterned surrounding region makes outside spacing easier to distinguish.
  6. Inspect the element’s box-model diagram in DevTools, then change one spacing value.
HTML used by this example
<div class="preview-frame"><div class="card">Content sits inside padding, border and margin.</div></div>

The Four Layers

Each layer adds space around the one before it.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-frame{background:repeating-linear-gradient(45deg,#ecfdf5 0 8px,#d1fae5 8px 16px);padding:1px}.box,.card,.debug{background:#fff7ed;color:#431407}

.box {
  width: 200px;        /* content width */
  padding: 20px;        /* space inside the border */
  border: 2px solid #333; /* the border itself */
  margin: 10px;          /* space outside the border */
}
/* Total rendered width (standard box-sizing) = 200 + 40 + 4 + 20 = 264px */
  1. The text is the content; padding and border contribute to the painted box.
  2. The patterned surrounding region makes outside spacing easier to distinguish.
  3. With content-box, the declared 200px content width grows by padding and borders.
HTML used by this example
<div class="preview-frame"><div class="box">Content sits inside padding, border and margin.</div></div>

Visualizing with DevTools Colors

A common way to debug layout by temporarily outlining the box model layers.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-frame{background:repeating-linear-gradient(45deg,#ecfdf5 0 8px,#d1fae5 8px 16px);padding:1px}.box,.card,.debug{background:#fff7ed;color:#431407}

.debug {
  outline: 2px solid red;      /* shows content edge without affecting layout */
  background: rgba(0, 150, 255, 0.1); /* shows padding area */
}
  1. The text is the content; padding and border contribute to the painted box.
  2. The patterned surrounding region makes outside spacing easier to distinguish.
  3. Inspect the element’s box-model diagram in DevTools, then change one spacing value.
HTML used by this example
<div class="preview-frame"><div class="debug">Content sits inside padding, border and margin.</div></div>

Parameters and values

  • width / height (length | %): Sets the content box dimensions
  • padding (length): Space between content and border
  • border (width style color): The visible edge around the padding
  • margin (length | auto): Space outside the border, between this element and others

Best practices

  • Set box-sizing: border-box globally so padding and border are included in the declared width, avoiding surprise overflow
  • Use margin for spacing between elements, and padding for spacing within an element
  • Remember vertical margins between block elements can "collapse" into a single margin - the larger of the two, not their sum
  • Use browser DevTools box model inspector when layout looks wrong - it visually breaks down all four layers

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

When should I use this?

Use the box model whenever an element is too wide, spacing is unexpected, or a layout overflows.

Common mistakes

A full-width box with extra padding

With content-box, padding and border are added to width: 100%.

Incorrect

.card { width: 100%; padding: 24px; }

Corrected

.card { box-sizing: border-box; width: 100%; padding: 24px; }

Compare approaches

Accessibility

  • Keep text containers flexible so larger text can reflow.
  • Use spacing to reinforce grouping without relying solely on colour.

Explore deeper

Margin is not always simple addition

Adjacent vertical margins in normal block flow can collapse. Flex and grid item margins do not collapse with each other. Inspect the layout context before adding more margin.

Specifications & further reading