CSS Box Model vollständig erklärt

Jedes Element in CSS ist eine Box. Verstehen Sie Content, Padding, Border, Margin und das box-sizing-Verhalten.

Die vier Schichten

┌─────────────────────────────────────────────────────┐
│                     MARGIN                          │
│   ┌─────────────────────────────────────────────┐   │
│   │                 BORDER                      │   │
│   │   ┌─────────────────────────────────────┐   │   │
│   │   │             PADDING                 │   │   │
│   │   │   ┌─────────────────────────────┐   │   │   │
│   │   │   │                             │   │   │   │
│   │   │   │          CONTENT            │   │   │   │
│   │   │   │                             │   │   │   │
│   │   │   └─────────────────────────────┘   │   │   │
│   │   │                                     │   │   │
│   │   └─────────────────────────────────────┘   │   │
│   │                                             │   │
│   └─────────────────────────────────────────────┘   │
│                                                     │
└─────────────────────────────────────────────────────┘

box-sizing: Der Gamechanger

/* Standard: content-box */
.element {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}
/* Tatsächliche Breite: 200 + 40 + 10 = 250px */

/* Modern: border-box */
.element {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}
/* Tatsächliche Breite: 200px (Content schrumpft auf 150px) */

/* Best Practice: Global setzen */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Oder mit Vererbung (flexibler für Widgets) */
html {
    box-sizing: border-box;
}

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

Padding und Margin Kurzschreibweisen

/* Ein Wert: Alle Seiten */
padding: 20px;
margin: 20px;

/* Zwei Werte: vertical | horizontal */
padding: 10px 20px;
/* top+bottom: 10px, left+right: 20px */

/* Drei Werte: top | horizontal | bottom */
padding: 10px 20px 30px;
/* top: 10px, left+right: 20px, bottom: 30px */

/* Vier Werte: top | right | bottom | left (Uhrzeigersinn) */
padding: 10px 20px 30px 40px;

/* Logical Properties (für RTL-Support) */
padding-inline: 20px;     /* left + right */
padding-block: 10px;      /* top + bottom */
margin-inline-start: 20px; /* left (oder right bei RTL) */

Margin Collapse

/* Vertikale Margins kollabieren! */

.box1 {
    margin-bottom: 30px;
}

.box2 {
    margin-top: 20px;
}

/* Abstand zwischen box1 und box2: 30px (nicht 50px!)
   Der größere Margin gewinnt */

/* Wann Margins NICHT kollabieren: */
/* 1. Horizontale Margins */
/* 2. Bei float oder absolute Position */
/* 3. Bei overflow != visible */
/* 4. Bei flexbox/grid Kindern */

/* Collapse verhindern */
.parent {
    overflow: auto;      /* Methode 1 */
    display: flow-root;  /* Methode 2 (Modern) */
    padding-top: 1px;    /* Methode 3 (Hack) */
}

Größenberechnung

/* Width und Height */
.element {
    width: 300px;       /* Feste Breite */
    height: auto;       /* Automatische Höhe */

    min-width: 200px;   /* Minimum */
    max-width: 500px;   /* Maximum */
    min-height: 100px;
    max-height: 400px;
}

/* Prozentuale Größen */
.child {
    width: 50%;         /* 50% des Parents */
    height: 100%;       /* Braucht Parent mit definierter Höhe! */
}

/* Viewport-Einheiten */
.fullscreen {
    width: 100vw;       /* 100% Viewport-Breite */
    height: 100vh;      /* 100% Viewport-Höhe */
}

/* Moderne Einheiten */
.element {
    height: 100dvh;     /* Dynamic vh (mobile-friendly) */
    width: min(100%, 800px);  /* Minimum von beiden */
    width: max(300px, 50%);   /* Maximum von beiden */
    width: clamp(300px, 50%, 800px); /* Min, Preferred, Max */
}

Border

/* Kurzschreibweise */
border: 1px solid #333;

/* Einzelne Seiten */
border-top: 2px dashed red;
border-bottom: none;

/* Einzelne Eigenschaften */
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted double;
border-color: red green blue yellow;

/* Border-Radius */
border-radius: 10px;           /* Alle Ecken */
border-radius: 10px 20px;      /* TL+BR | TR+BL */
border-radius: 50%;            /* Kreis (bei quadratischem Element) */
border-radius: 10px 20px 30px 40px; /* TL TR BR BL */

/* Elliptische Ecken */
border-radius: 50px / 25px;    /* horizontal / vertical */

/* Einzelne Ecken */
border-top-left-radius: 20px;
border-top-right-radius: 10px 20px; /* horizontal vertical */

/* Outline (außerhalb der Box, nimmt keinen Platz) */
outline: 2px solid blue;
outline-offset: 5px;

Praktische Beispiele

/* Zentrieren mit Margin */
.center-block {
    width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    /* Oder kurz: margin: 0 auto; */
}

/* Card mit gleichmäßigem Spacing */
.card {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* Negativer Margin (Element ausbrechen lassen) */
.full-width-image {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
}

/* Pill/Badge */
.badge {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: 9999px;
    background: #3b82f6;
    color: white;
}

/* Aspect Ratio Box */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* Alte Methode (Padding-Hack) */
.aspect-16-9-old {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9/16 = 0.5625 */
}

.aspect-16-9-old > * {
    position: absolute;
    inset: 0;
}

DevTools: Box Model debuggen

/* Im Browser:
   1. Element inspizieren (F12)
   2. "Computed" Tab öffnen
   3. Box Model Diagramm zeigt alle Werte

   Farben in Chrome DevTools:
   - Blau: Content
   - Grün: Padding
   - Orange/Gelb: Border
   - Orange: Margin
*/

/* Debug-Klasse */
.debug-box * {
    outline: 1px solid red !important;
}

Häufige Fehler

/* ❌ Prozentuale Höhe ohne Parent-Höhe */
.parent {
    /* height nicht gesetzt */
}
.child {
    height: 50%;  /* Funktioniert nicht! */
}

/* ✅ Lösung */
.parent {
    height: 100vh;  /* Oder andere definierte Höhe */
}
.child {
    height: 50%;
}

/* ❌ Margin Collapse vergessen */
/* Zwei aufeinanderfolgende Elemente */

/* ❌ box-sizing vergessen */
.element {
    width: 100%;
    padding: 20px;
    /* Überläuft den Container! */
}

/* ✅ Immer border-box global setzen */

Weitere Informationen

• 📦 CSS Flexbox
• 📐 CSS Grid
• 📱 Responsive Design