CSS-Boxmodell
Sie kennen bereits Border, Padding, Margin und Width. Jetzt setzen Sie alles auf eine Karte. Das CSS-Boxmodell sagt: Jedes Element besteht aus verschachtelten Schichten — Content in der Mitte, dann Padding, dann Border, dann Margin außen.
Die vier Schichten
Lesen Sie die Box von innen nach außen.
📊 Schichten des Boxmodells
| Schicht | Wo sie sitzt | Alltagsjob |
|---|---|---|
| Content | Zentrum | Text, Bilder und Kinder leben hier; width / height bemessen meist dies |
| Padding | Zwischen Content und Border | Innere Polsterung; Hintergrund füllt sie meist |
| Border | Um das Padding | Die gezeichnete Kante der Box |
| Margin | Außerhalb des Borders | Äußerer Abstand, der diese Box von Nachbarn trennt |
Zuerst nur Content-Größe
Eine schlichte Breite ohne Padding und Border hält die Geschichte klar.
Nur Content-Breite
css.box-content {
width: 200px;
background-color: #ccfbf1;
}Padding hinzufügen — die gemalte Fläche wächst
Padding sitzt innerhalb des Borders. Im Standardmodell content-box wird Padding außerhalb der Content-Breite addiert — die gemalte Box wird breiter.
Content plus Padding
css.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* Content bleibt 200px breit; Padding addiert 20px je Seite */Border hinzufügen — ein weiterer Ring
Der Border umschließt das Padding. Mit Standard-Sizing addiert auch die Border-Dicke zur äußeren Größe der Border-Box.
Content, Padding und Border
css.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}Alle vier Schichten zusammen
Margin malt den Hintergrund nicht; es schiebt nur Nachbarn weg.
Vollständiges Boxmodell-Rezept
css.card {
width: 200px; /* Content */
padding: 16px; /* innere Polsterung */
border: 2px solid #134e4a; /* Kante */
margin: 24px; /* äußerer Abstand */
background-color: #ecfdf5;
}Gleiche Breite, andere Gesamtgröße
Zwei Boxen können width: 200px teilen und sich doch sehr unterschiedlich anfühlen, sobald Padding und Border ins Rezept kommen.
Schlicht vs. gepolstert
css.bare {
width: 200px;
background-color: #fef3c7;
}
.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Beide beanspruchen width 200px; .padded braucht mehr Horizontalraum */Die Standardregel merken
Standardmäßig (box-sizing: content-box) beschreiben width und height die Content-Box. Padding und Border machen die sichtbare Box oft größer. Eine spätere Lektion behandelt box-sizing: border-box, das diese Rechnung ändert.
Selbst ausprobieren
- Bauen Sie
.box-contentnur mitwidth: 200pxund Hintergrund. - Kopieren,
padding: 20pxergänzen und die wachsende gemalte Fläche beobachten. - Einen dicken Border setzen und die Gesamtgröße erneut prüfen.
margin: 24pxsetzen und bestätigen, dass Nachbarn wegrücken, ohne dass der Hintergrund die Lücke füllt..bareund.paddednebeneinander — gleiche deklarierte Breite, unterschiedlicher Fußabdruck.
Häufige Fehler
- Margin als Teil der Hintergrundfüllung denken (es liegt außen und ist meist transparent)
width: 200pxsetzen und erwarten, die Border-Box bleibe nach starkem Padding genau 200px (nicht mit content-box)- Die Schichtreihenfolge verwechseln (Content → Padding → Border → Margin)
- Outline mit Border verwechseln (anderes Werkzeug)
- Zu Border-Box-Gewohnheiten springen, bevor das Standardmodell sitzt
Kurzfassung
- Jedes Element hat Content-, Padding-, Border- und Margin-Schichten
- Padding liegt innen am Border; Margin außen
- Standard-width/height bemessen die Content-Box
- Padding und Border vergrößern oft die sichtbare Gesamtgröße
- Margin schafft äußere Trennung ohne die Füllung zu malen
box-sizing(nächste Speziallektion) kann die Breitenrechnung ändern
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt