The Box Model

Syntax

width, padding, border, margin

Examples

.card {
  box-sizing: border-box;
  width: 260px;
  max-width: 100%;
  padding: 24px;
  border: 4px solid royalblue;
  margin: 16px 0;
}

.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 */

.debug {
  outline: 2px solid red;      /* shows content edge without affecting layout */
  background: rgba(0, 150, 255, 0.1); /* shows padding area */
}

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

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

In plain English

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

What you’ll learn

• Distinguish the four layers.
• Predict the rendered width.
• Choose a box-sizing model.

Before you start: HTML

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

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.

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

• content-box: width describes the content area.
• border-box: width includes padding and border.

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

• W3C: CSS Box Model

Related CSS documentation