The Box Model

Every element on a page is a box — and the box model is the four nested layers that decide how big it is and how much space it takes. From the inside out: content, padding, border, margin.

Where you meet it

Spacing a button: padding inside, margin to push neighbours away.
A card or panel that's wider than you expected — padding and border quietly added on.
Your browser's DevTools, where the inspector draws this exact diagram for every element.

What it does

It turns the abstract "how much room does this take?" into four concrete bands. Content holds your text or image. Padding is breathing room inside the edge, painted with the background. Border wraps the padding. Margin is invisible space outside, separating one box from the next.

"Why is my layout too wide?" — because by default width is just the content, and padding and border pile on top.

How it works

The layers always stack in the same order, and each one adds to the element's total footprint. The catch is box-sizing: it decides whether width measures just the content, or the whole box up to the border.

.box { width: 300px; padding: 20px; border: 5px solid; }

/* content-box (the default) */
/* width = content only → total = 300 + 20·2 + 5·2 = 350px */

/* border-box */
.box { box-sizing: border-box; }
/* width = content + padding + border → total stays 300px */

With content-box, padding and border grow the box. With border-box, they're carved out of the width you asked for, so 300px means 300px.

Watch out

The default is content-box — padding and border are added to width, which is the classic "why is my layout too wide?" surprise.
Vertical margins collapse: two stacked boxes share the larger margin, they don't add up. Padding never collapses.
Margins can be negative; padding cannot. Padding shows the background, margin never does.

Go deeper

Jedes Element auf einer Seite ist eine Box — und das Box-Modell sind die vier verschachtelten Schichten, die festlegen, wie groß sie ist und wie viel Platz sie einnimmt. Von innen nach außen: content, padding, border, margin.

Wo es vorkommt

Einen Button abstimmen: padding innen, margin um Nachbarn wegzuschieben.
Eine Card oder ein Panel, das breiter ist als erwartet — padding und border kamen still dazu.
Die DevTools deines Browsers, deren Inspector genau dieses Diagramm für jedes Element zeichnet.

Was es tut

Es übersetzt das abstrakte "wie viel Platz braucht das?" in vier konkrete Bänder. Content hält deinen Text oder dein Bild. Padding ist Luft innerhalb der Kante, mit dem Hintergrund gefüllt. Border umschließt das Padding. Margin ist unsichtbarer Abstand außen, der eine Box von der nächsten trennt.

"Warum ist mein Layout zu breit?" — weil width standardmäßig nur den Content meint und padding plus border obendrauf kommen.

Wie es funktioniert

Die Schichten stapeln sich immer in derselben Reihenfolge, und jede vergrößert den Gesamtplatz des Elements. Der Knackpunkt ist box-sizing: Es entscheidet, ob width nur den Content misst oder die ganze Box bis zum Border.

.box { width: 300px; padding: 20px; border: 5px solid; }

/* content-box (Standard) */
/* width = nur Content → gesamt = 300 + 20·2 + 5·2 = 350px */

/* border-box */
.box { box-sizing: border-box; }
/* width = Content + padding + border → bleibt 300px */

Bei content-box vergrößern padding und border die Box. Bei border-box werden sie aus der angegebenen Breite herausgerechnet — 300px heißt dann 300px.

Worauf achten

Der Standard ist content-box — padding und border werden zu width addiert, die klassische "warum ist mein Layout zu breit?"-Überraschung.
Vertikale Margins kollabieren: zwei gestapelte Boxen teilen sich den größeren Margin, sie addieren sich nicht. Padding kollabiert nie.
Margins dürfen negativ sein, Padding nicht. Padding zeigt den Hintergrund, Margin nie.