Boxmodell
Jedes Element ist eine Box aus Inhalt, Innenabstand, Rahmen und Aussenabstand. Wer das Boxmodell versteht, versteht Layout.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Die vier Schichten
Ganz innen liegt der Inhalt mit width und height.
padding ist der Innenabstand zwischen Inhalt und Rahmen. border ist der Rahmen selbst.
margin ist der Aussenabstand zu benachbarten Elementen und liegt ausserhalb des Rahmens.
.card {
width: 300px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}Breite berechnen
Im Standardmodell (content-box) ist die Gesamtbreite width + padding + border + margin.
Beispiel: 200px Breite, 2x10px padding, 2x2px border und 2x15px margin ergeben 254px Platzbedarf.
box-sizing: border-box
Mit border-box zählen padding und border in die angegebene width hinein.
Das macht Layouts deutlich berechenbarer.
Viele Projekte setzen border-box deshalb global für alle Elemente.
* {
box-sizing: border-box;
}
.card {
width: 300px; /* inkl. padding und border */
padding: 16px;
border: 2px solid #ccc;
border-radius: 8px;
}Vertiefung
Jede Box hat vier Schichten
Im content-box-Modell beschreibt width nur den Inhalt. Padding und Border kommen außen dazu. Deshalb ist ein Element mit width: 300px und padding: 16px tatsächlich 332px breit.
Mit box-sizing: border-box gehören Padding und Border zur angegebenen Breite. Das ist für berechenbare Layouts fast immer die bessere Wahl. Margin liegt immer außerhalb und zählt nicht zur Box.
*, *::before, *::after {
box-sizing: border-box;
}
.card {
width: 20rem; /* inklusive Padding und Border */
padding: 1rem;
border: 2px solid #cbd5e1;
}Merksatz: border-box macht width und height vorhersagbar. Margin bleibt außerhalb der Box.
Übungsaufgabe
Karte berechnen und bauen
Baue eine Karte mit 20rem Breite, 1rem Innenabstand und 2px Rahmen. Erkläre im Kommentar, wie breit sie mit content-box und mit border-box wäre.
Das soll dein Programm können
- Globales border-box
- width, padding und border auf .card
- Kommentar mit beiden Berechnungen
- border-radius und ein Hintergrund
- box-shadow für die Abgrenzung
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Bei content-box: 20rem + 2 × 1rem + 2 × 2px. Bei border-box bleibt die Außenbreite 20rem.
Lösung anzeigen
*, *::before, *::after {
box-sizing: border-box;
}
.card {
/* content-box: 20rem + 2rem + 4px
border-box: 20rem inklusive Padding und Rahmen */
width: 20rem;
padding: 1rem;
border: 2px solid #cbd5e1;
border-radius: 0.75rem;
background: #ffffff;
box-shadow: 0 12px 30px rgb(15 23 42 / 0.12);
}Warum funktioniert das?
Mit border-box bleiben die 20rem die sichtbare Außenbreite. Der Inhalt wird entsprechend kleiner, statt das Layout zu sprengen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.