The Box Model

Every element in CSS is a rectangular box made of four nested areas — content, padding, border, and margin.

Ask a developer why their element is the wrong size and nine times out of ten the answer is the box model. Every element — a paragraph, a button, a nav bar — is a rectangle with four nested areas. Learn them once and layout stops being mysterious.

The four areas

From inside out:

┌──────────────────────────────────┐  ← margin (outside, transparent)
│  ┌────────────────────────────┐  │  ← border (the visible stroke)
│  │  ┌──────────────────────┐  │  │  ← padding (inside the border)
│  │  │     content box      │  │  │  ← width × height applies here (by default)
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

Content — where text and child elements live. width and height set the size of this area by default.
Padding — space between the content and the border. It is inside the element — clicking or hovering inside the padding triggers the element's click/hover state. It inherits the element's background colour.
Border — the visible stroke drawn around the padding. Controlled with border: 2px solid #333 (width, style, colour).
Margin — space outside the border, separating this element from its neighbours. It is always transparent — it cannot have a background colour.

content-box vs border-box

Here is the classic trap. Set width: 300px on an element with padding: 20px and border: 2px solid. What is its total rendered width?

Under the default content-box model:

total width = content(300) + padding-left(20) + padding-right(20)
            + border-left(2) + border-right(2)
            = 344px

The element is 344 pixels wide, even though you wrote 300px. This surprises every developer the first time.

Under border-box:

box-sizing: border-box;

width: 300px now means the total — the 300 includes padding and border. The content area shrinks to fit. The element is exactly 300 pixels wide.

This is so universally preferred that virtually every modern project starts with this global reset:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Apply it once at the top of your stylesheet and never think about content-box again.

The * selector targets every element. *::before and *::after extend it to pseudo-elements, which also participate in the box model. This three-line reset is the single most impactful CSS line most developers ever write.

Padding and margin shorthand

Both properties accept one to four values:

/* All four sides the same */
padding: 16px;

/* Top/bottom | Left/right */
padding: 8px 16px;

/* Top | Left/right | Bottom */
padding: 8px 16px 12px;

/* Top | Right | Bottom | Left (clockwise from top) */
padding: 8px 16px 12px 20px;

You can also set individual sides explicitly: padding-top, padding-right, padding-bottom, padding-left. The same pattern applies to margin.

Margin collapsing

Adjacent vertical margins collapse into a single margin equal to the larger of the two values. This is one of the most common sources of layout confusion:

h2 { margin-bottom: 24px; }
p  { margin-top: 16px; }

The space between an <h2> and the following <p> is not 40px — it is 24px. The two margins overlap and the larger wins.

Margin collapsing only happens vertically (top and bottom), and only in normal flow. It does not happen between flex or grid items, and it does not happen horizontally.

A reliable way to avoid unexpected margin collapsing: apply spacing in one direction only. Many design systems use only margin-bottom on all block elements and never margin-top. The result is predictable — the space always comes from the element above, not a collision between two margins.

Negative margins

Margins can be negative. A negative margin pulls the element (or its neighbours) in the opposite direction. This is occasionally useful for overlapping effects and for counteracting spacing inherited from a parent's padding:

.full-bleed-image {
  /* Counteract 24px of parent padding on both sides */
  margin-left: -24px;
  margin-right: -24px;
}

Use negative margins sparingly — they are hard to reason about and can cause overflow if the calculation changes.

Inspecting the box model in DevTools

Every browser's DevTools shows a visual box model diagram when you select an element:

Open DevTools (F12 or right-click → Inspect).
Select an element in the Elements panel.
Look at the Styles sidebar — scroll to the bottom to find the box diagram, or switch to the Computed tab.

The diagram shows the exact computed values for each area in the four nested rectangles, colour-coded: orange for margin, green for padding, blue for content. This is the fastest debugging tool for layout problems.

Where to go next

Next: Colors, Typography, and Units — how to express colour in CSS, which units to use for fonts and spacing, and how rem and em behave differently in nested contexts.

Finished reading? Mark it complete to track your progress.