📦 1. Die 4 Schichten des Box-Modells
Jedes gerenderte HTML-Element ist ein rechteckiger Kasten, der aus vier konzentrischen Bereichen besteht:
📐 2. box-sizing: border-box – Der Lebensretter
Im alten Standard (content-box) addieren sich Padding und Border zur Breite hinzu: Ein 200px breites Element mit 20px Padding und 2px Border wird plötzlich 244px breit und sprengt das Layout!
Mit box-sizing: border-box bleibt die Gesamtbreite immer exakt 200px (Padding & Border werden nach innen gerechnet):
/* 🌟 Best Practice: Der universelle Box-Sizing Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}🧲 3. Vertikaler Margin Collapse & Zentrierung
Wenn zwei vertikal aufeinanderfolgende Block-Elemente margin-bottom: 20px und margin-top: 30px haben, addieren sich die Abstände nicht zu 50px – sie verschmelzen (kollabieren) zum größeren Wert (30px)!
/* Horizontale Zentrierung von Containern: */
.container {
max-width: 800px;
margin: 0 auto; /* Oben/Unten: 0, Links/Rechts: auto */
padding: 24px;
}
/* Inline-Block für nebeneinanderstehende Badges: */
.badge {
display: inline-block;
padding: 6px 12px;
margin-right: 8px;
}Content: Das Smartphone im Paket.
Padding: Die Luftpolsterfolie um das Smartphone herum.
Border: Der feste Pappkarton.
Margin: Der Sicherheitsabstand zu anderen Paketen im Lieferwagen.
📑 4. Cheat-Sheet: Box-Modell Kurzschreibweisen (Shorthands)
| Syntax | Beispiel | Bedeutung |
|---|---|---|
| 1 Wert | padding: 16px; |
Alle 4 Seiten (Top, Right, Bottom, Left) |
| 2 Werte | margin: 10px auto; |
[Oben & Unten] [Links & Rechts] |
| 3 Werte | padding: 10px 20px 30px; |
[Oben] [Links & Rechts] [Unten] |
| 4 Werte (Uhrzeigersinn) | margin: 10px 20px 15px 5px; |
TRBL: Top → Right → Bottom → Left |
🧠 Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.