CSS Box Model Erklaert
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 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ │ │ │ └─────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────┘
| Schicht | Beschreibung | Eigenschaften |
|---|---|---|
| Content | Der eigentliche Inhalt | width, height |
| Padding | Innenabstand | padding, padding-top/right/bottom/left |
| Border | Rahmen | border, border-width/style/color |
| Margin | Außenabstand | margin, margin-top/right/bottom/left |
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 */
💡 Best Practice:
Setzen Sie
box-sizing: border-box global. Nutzen Sie padding für Innenabstände innerhalb eines Elements und margin für Abstände zwischen Elementen. Beachten Sie Margin Collapse bei vertikalen Abständen.