05 – Box-Modell 📦
Jedes Element ist eine Box – versteh, wie sie aufgebaut ist
📦 1. Was ist das Box-Modell?
In CSS wird jedes HTML-Element als rechteckige „Box“ behandelt. Diese Box besteht aus vier übereinanderliegenden Schichten:
- Content – der eigentliche Inhalt (Text, Bild, etc.)
- Padding – Abstand zwischen Inhalt und Rahmen (innen)
- Border – der sichtbare Rahmen um das Element
- Margin – Abstand zur nächsten Box (außen)
width + padding-links + padding-rechts + border-links + border-rechts + margin-links + margin-rechts
Ohne Kontrolle führt das schnell zu unerwarteten Layout-Verschiebungen – besonders bei responsivem Design.
📚 Vertiefung auf W3Schools – Box Model
W3Schools erklärt das Box-Modell mit interaktiven Beispielen und visueller Darstellung.
🖱️ 2. Interaktive Box – spiele damit!
Verändere die Werte für padding, border und margin – und beobachte, wie sich die Box verhält.
🔧 3. Das Geheimnis professioneller Layouts: box-sizing: border-box
Standardmäßig gilt: Wenn du width: 200px setzt, bezieht sich das nur auf den Content.
Sobald du Padding oder Border hinzufügst, wird die Box breiter als 200px – oft unerwünscht!
Die Lösung: Das box-sizing-Property.
* {
box-sizing: border-box;
}width auf die gesamte Box (inkl. Padding und Border).
→ Layouts werden vorhersehbar, stabil und leichter zu erstellen.
box-sizing: border-box ist responsives Design extrem fehleranfällig!
Dieses Snippet gehört in jede CSS-Datei – direkt am Anfang.
🧠 4. KI als Lernpartner – guter Prompt
❌ Schlecht: „Schreib mir CSS für eine Box.“
✅ Gut: „Erkläre mir das CSS-Box-Modell Schritt für Schritt – und zeig, wie box-sizing: border-box verhindert, dass Elemente unbeabsichtigt über den Container hinauswachsen.“