Was ist das CSS-Box-Modell?

Question

Accepted Answer

Jedes Element in CSS ist eine rechteckige **Box** bestehend aus vier Schichten, von innen nach außen: **content**, **padding**, **border** und **margin**. Zu verstehen, wie sie zusammenwirken, ist die Grundlage aller Layouts.

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## Das klassische Problem: Gesamtbreite

Mit dem **Standard** `box-sizing: content-box` ist die gerenderte Breite *größer* als die `width`, die Sie festgelegt haben, da padding und border oben hinzugefügt werden:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

Das überrascht Anfänger — Sie stellen `width: 200px` ein, aber es nimmt 250px ein. Die Lösung, die jeder nutzt:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding vs margin

- **padding** — Platz *innerhalb* des Rands; es ist Teil des Elements (anklickbar, bekommt Hintergrundfarbe).
- **margin** — Platz *außerhalb* des Rands; transparent und benachbarte vertikale Ränder **fallen zusammen** (der größere von zwei angrenzenden Rändern gewinnt).

## Warum es wichtig ist

Das Box-Modell bestimmt, wie groß Elemente tatsächlich sind und wie sie sich voneinander entfernen.

Zu wissen, dass das Standard-Modell padding/border zu `width` addiert (und warum `border-box` die nahezu universelle Lösung ist) verhindert die häufigste Layout-Größen-Verwirrung.