CSS

Boxmodell

Jedes Element ist eine Box aus Inhalt, Innenabstand, Rahmen und Aussenabstand. Wer das Boxmodell versteht, versteht Layout.

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.

Boxmodell komplett

.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.

<content-box>

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><border-radius>

Globales border-box

* {
  box-sizing: border-box;
}

.card {
  width: 300px; /* inkl. padding und border */
  padding: 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
}

Fortschritt

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.