CSS Box Model - Die Box verstehen
Das Box Model ist eines der wichtigsten Konzepte in CSS. Jedes HTML-Element ist eine Box mit 4 Bereichen.
Die 4 Bereiche des Box Models
Jedes Element besteht aus:
Von innen nach außen:
- Content - Der eigentliche Inhalt (Text, Bilder)
- Padding - Innenabstand (zwischen Content und Border)
- Border - Rahmen um die Box
- Margin - Außenabstand (zwischen Boxen)
1. Content - Der Inhalt
Der Bereich, in dem Text, Bilder etc. angezeigt werden:
Content mit width/height
.box {
width: 300px;
height: 200px;
background-color: lightblue;
}Wichtig: width und height beziehen sich standardmäßig nur auf den Content!
2. Padding - Der Innenabstand
Padding = Platz innerhalb der Box, zwischen Content und Border:
Padding - Innenabstand
.box {
padding: 20px; /* Alle Seiten 20px */
background-color: lightblue;
}
/* Verschiedene Werte pro Seite */
.box-2 {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}Padding Kurzschreibweise
4 Werte (oben, rechts, unten, links - im Uhrzeigersinn):
padding: 10px 20px 10px 20px;
3 Werte (oben, links/rechts, unten):
padding: 10px 20px 10px;
2 Werte (oben/unten, links/rechts):
padding: 10px 20px;
1 Wert (alle Seiten gleich):
padding: 20px;
Padding Kurzschreibweise
/* Alle Seiten 20px */
.box-1 {
padding: 20px;
}
/* Oben/unten 10px, links/rechts 20px */
.box-2 {
padding: 10px 20px;
}
/* Oben 5px, links/rechts 10px, unten 15px */
.box-3 {
padding: 5px 10px 15px;
}
/* Alle 4 Seiten unterschiedlich */
.box-4 {
padding: 5px 10px 15px 20px; /* oben rechts unten links */
}Merkhilfe: Im Uhrzeigersinn (oben → rechts → unten → links)
3. Border - Der Rahmen
Border = Rahmen um die Box:
Border - Rahmen
.box {
border: 2px solid black;
/* ↑ ↑ ↑
| | └─ Farbe
| └──────── Style
└──────────── Breite
*/
}
/* Verschiedene Rahmen-Stile */
.solid {
border: 2px solid black; /* Durchgehende Linie */
}
.dashed {
border: 2px dashed blue; /* Gestrichelt */
}
.dotted {
border: 2px dotted red; /* Gepunktet */
}
.double {
border: 4px double green; /* Doppellinie */
}Border pro Seite
Du kannst jeden Rahmen einzeln stylen:
Border pro Seite
.box {
border-top: 3px solid red;
border-right: 2px dashed blue;
border-bottom: 1px dotted green;
border-left: 4px double orange;
}
/* Oder nur eine Seite */
.box-top-only {
border-top: 2px solid #333;
}border-radius - Abgerundete Ecken
border-radius
/* Alle Ecken gleich */
.box-1 {
border-radius: 10px;
}
/* Vollständig rund (für Kreise) */
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* Kreis! */
}
/* Verschiedene Ecken */
.box-2 {
border-radius: 10px 20px 30px 40px; /* oben-links, oben-rechts, unten-rechts, unten-links */
}
/* Nur oben abgerundet */
.box-3 {
border-radius: 10px 10px 0 0;
}4. Margin - Der Außenabstand
Margin = Platz außerhalb der Box, zwischen Boxen:
Margin - Außenabstand
.box {
margin: 20px; /* Alle Seiten 20px Abstand */
background-color: lightblue;
}
/* Verschiedene Werte pro Seite */
.box-2 {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}Margin Kurzschreibweise
Genau wie Padding:
Margin Kurzschreibweise
/* Alle Seiten 20px */
.box-1 {
margin: 20px;
}
/* Oben/unten 20px, links/rechts 40px */
.box-2 {
margin: 20px 40px;
}
/* Oben 10px, links/rechts 20px, unten 30px */
.box-3 {
margin: 10px 20px 30px;
}
/* Alle 4 Seiten unterschiedlich */
.box-4 {
margin: 10px 20px 30px 40px; /* oben rechts unten links */
}Margin: auto - Zentrieren
Horizontales Zentrieren:
Zentrieren mit margin: auto
.box {
width: 300px;
margin: 0 auto; /* Oben/unten 0, links/rechts automatisch */
/* Zentriert die Box horizontal! */
}
/* Oder ausgeschrieben */
.box-2 {
width: 300px;
margin-left: auto;
margin-right: auto;
}Wichtig: Funktioniert nur mit fester width!
Negative Margins
Margins können negativ sein:
Negative Margins
.box {
margin-top: -20px; /* Zieht Box 20px nach oben */
}
.overlap {
margin-left: -10px; /* Überlappung mit linkem Element */
}Width und Height
Standardmäßig beziehen sich width und height nur auf Content:
Width & Height
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
}
/* Tatsächliche Breite:
300px (content)
+ 20px (padding-left)
+ 20px (padding-right)
+ 5px (border-left)
+ 5px (border-right)
= 350px Gesamtbreite!
*/Problem: Mathematik ist kompliziert!
box-sizing - Das wichtigste Property!
Mit box-sizing änderst du die Berechnung:
box-sizing
/* Standard (kompliziert) */
.box-1 {
box-sizing: content-box; /* width bezieht sich nur auf Content */
width: 300px;
padding: 20px;
border: 5px solid black;
/* Tatsächliche Breite: 350px */
}
/* Besser (einfach!) */
.box-2 {
box-sizing: border-box; /* width = Content + Padding + Border */
width: 300px;
padding: 20px;
border: 5px solid black;
/* Tatsächliche Breite: 300px (wie angegeben!) */
}Global box-sizing setzen
Best Practice: Setze es global für ALLE Elemente:
Global box-sizing
/* Am Anfang deiner CSS-Datei */
* {
box-sizing: border-box;
}
/* ODER besser (für bessere Performance): */
*,
*::before,
*::after {
box-sizing: border-box;
}Warum?
- ✅ Einfachere Mathematik
- ✅ width = tatsächliche Breite
- ✅ Keine Überraschungen
- ✅ Standard in allen modernen Frameworks
Vollständiges Beispiel
Box Model in Aktion
/* Global border-box setzen */
* {
box-sizing: border-box;
}
/* Card-Komponente */
.card {
width: 300px; /* Gesamtbreite */
padding: 20px; /* Innenabstand */
margin: 20px; /* Außenabstand */
border: 2px solid #ddd; /* Rahmen */
border-radius: 8px; /* Abgerundete Ecken */
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Schatten */
}
/* Card-Titel */
.card h2 {
margin: 0 0 10px 0; /* Nur unten Abstand */
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* Card-Text */
.card p {
margin: 0; /* Kein Außenabstand */
line-height: 1.6;
}Margin Collapsing - Wichtiger Fallstrick!
Problem: Vertikale Margins von benachbarten Elementen verschmelzen:
Margin Collapsing
/* HTML */
<div class="box-1">Box 1</div>
<div class="box-2">Box 2</div>
/* CSS */
.box-1 {
margin-bottom: 30px; /* 30px unten */
}
.box-2 {
margin-top: 20px; /* 20px oben */
}
/* Abstand zwischen Boxen: 30px (nicht 50px!) */
/* Der größere Wert "gewinnt" */Wichtig:
- Passiert nur vertikal (nicht horizontal)
- Der größere Margin gewinnt
- Passiert NICHT bei Padding oder Border
Lösung:
- Nutze nur
margin-bottomODERmargin-top - Oder nutze Padding statt Margin
- Oder nutze Flexbox/Grid (kein Collapsing)
Best Practices
✅ DO:
box-sizing: border-boximmer global setzen- Padding für Innenabstand, Margin für Außenabstand
- Margin für Layout, Padding für Styling
- Einheitliche Abstände (z.B. nur 8px, 16px, 24px)
margin: 0 autofür horizontales Zentrieren- Kurzschreibweise nutzen (
padding: 10px 20px)
❌ DON'T:
- Nicht beide Margins (nur top ODER bottom nutzen)
- Keine zu großen Werte (max. 100px)
- Nicht width: 100% mit Padding/Border (ohne border-box)
- Nicht zu viele unterschiedliche Werte (System nutzen!)
- Keine negativen Margins (außer Spezialfälle)
Spacing-System
Empfohlene Abstände (8px-System):
Spacing-System
:root {
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
}
.card {
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.button {
padding: var(--spacing-sm) var(--spacing-md);
}Praktisches Beispiel - Card Layout
Card Layout
/* HTML */
<div class="card">
<img src="image.jpg" alt="Bild" class="card-image">
<div class="card-content">
<h2 class="card-title">Titel</h2>
<p class="card-text">Beschreibung...</p>
<button class="card-button">Mehr erfahren</button>
</div>
</div>
/* CSS */
* {
box-sizing: border-box;
}
.card {
width: 320px;
margin: 20px;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card-title {
margin: 0 0 12px 0;
font-size: 24px;
font-weight: 700;
}
.card-text {
margin: 0 0 16px 0;
color: #666;
line-height: 1.6;
}
.card-button {
padding: 10px 20px;
border: none;
border-radius: 6px;
background-color: #007bff;
color: white;
cursor: pointer;
}DevTools - Box Model inspizieren
Chrome/Firefox DevTools:
- Rechtsklick auf Element → "Untersuchen"
- Im "Computed"-Tab siehst du das Box Model visuell
- Jeder Bereich ist farblich markiert:
- Blau = Content
- Grün = Padding
- Gelb/Orange = Border
- Orange/Rot = Margin
Häufige Anfängerfehler
Fehler 1: box-sizing vergessen
❌ FALSCH:
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
/* Tatsächliche Breite: 350px! */
}
✅ RICHTIG:
* {
box-sizing: border-box;
}
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
/* Tatsächliche Breite: 300px */
}
Fehler 2: width: 100% mit Padding
❌ FALSCH:
.box {
width: 100%;
padding: 20px;
/* Wird breiter als Container! */
}
✅ RICHTIG:
.box {
width: 100%;
padding: 20px;
box-sizing: border-box; /* Wichtig! */
}
Fehler 3: Margin Collapsing nicht beachtet
❌ FALSCH:
.box-1 {
margin-bottom: 20px;
}
.box-2 {
margin-top: 20px;
}
/* Abstand: nur 20px, nicht 40px! */
✅ RICHTIG:
.box-1 {
margin-bottom: 20px;
}
.box-2 {
margin-bottom: 20px; /* Konsistent nur bottom nutzen */
}
📝 Quiz
Was ist der Unterschied zwischen Padding und Margin?
📝 Quiz
Was bewirkt box-sizing: border-box?
⚡
Tipps & Tricks
Immer box-sizing: border-box nutzen
Setze es global am Anfang jeder CSS-Datei:
*, *::before, *::after {
box-sizing: border-box;
}
Warum? Macht width/height vorhersagbar, Standard in allen modernen Frameworks!
Margin-Collapsing verstehen und vermeiden
Verhindere Margin-Collapsing mit Flexbox oder Grid:
/* Problem: Vertikale Margins verschmelzen */
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* Abstand: nur 30px, nicht 50px! */
/* Lösung 1: Nur eine Richtung nutzen */
.box { margin-bottom: 20px; }
/* Lösung 2: Flexbox/Grid (kein Collapsing) */
.container {
display: flex;
flex-direction: column;
gap: 20px; /* Konsistente Abstände! */
}
Negative Margins für Overlaps
Erstelle interessante Layouts mit negativen Margins:
.card-header {
margin-bottom: -30px; /* Überlappt mit Content */
z-index: 1;
}
.card-image {
margin-top: -50px; /* Zieht Bild nach oben */
}
/* Vorsicht: Nur mit position und z-index kombinieren! */
Shorthand vs. Longhand strategisch nutzen
/* ✅ Shorthand für alle Seiten gleich */
.card {
padding: 20px;
margin: 0 auto; /* Horizontal zentriert */
}
/* ✅ Longhand für Klarheit bei unterschiedlichen Werten */
.header {
padding-top: 60px; /* Header-Höhe */
padding-bottom: 20px;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
Übungsaufgaben
Aufgabe 1: Card stylen
Erstelle eine Card mit:
- 300px Breite
- 20px Padding
- 1px Border (grau)
- 10px border-radius
- Zentriert mit margin
Aufgabe 2: Button
Style einen Button:
- Padding: oben/unten 12px, links/rechts 24px
- Border: 2px solid blau
- border-radius: 6px
- Kein Margin
Aufgabe 3: Layout
Erstelle 3 Boxen untereinander:
- 20px Abstand zwischen den Boxen
- Kein Margin Collapsing
- Jede Box mit 15px Padding
Nächste Schritte
Du kennst jetzt:
- ✅ Das CSS Box Model (Content, Padding, Border, Margin)
- ✅ box-sizing: border-box
- ✅ Kurzschreibweisen für Padding/Margin
- ✅ Margin Collapsing
- ✅ Zentrieren mit margin: auto
Als Nächstes lernst du:
- Display & Position (block, inline, absolute, relative)
- Flexbox (modernes Layout)
- CSS Grid (2D-Layouts)
Weiter so! 🚀
38% abgeschlossen
Lektion abgeschlossen!
Gut gemacht! 🎉
Du hast "CSS Box Model - margin, padding, border verstehen" abgeschlossen
Artikel bewerten
0.0 (0 Bewertungen)
Bitte einloggen um zu bewerten
Das könnte dich auch interessieren
CSS Backgrounds & Borders - Hintergründe & Rahmen stylen
Lerne alles über CSS Backgrounds (Farben, Bilder, Gradients) und Borders (border-radius, box-shadow) für modernes Design.
Anfängercss
CSS Basics - Deine Seite gestalten
Lerne, wie du mit CSS deine HTML-Seiten zum Leben erweckst. Farben, Schriftarten, Layouts - alles was du für schöne Webseiten brauchst.
Anfängercss
CSS Farben - hex, rgb, rgba, hsl erklärt
Lerne alle Wege, Farben in CSS zu definieren: Farbnamen, Hex-Codes, RGB, RGBA, HSL und wann du welches Format nutzt.
Anfängercss