HTML & CSS | Beginner

Das Box-Modell

Verstehen, wie Breite, Höhe, Abstand und Rahmen zusammenspielen.

Lernziel

Du verstehst das CSS-Box-Modell und seine Bestandteile.

Ein Element besteht aus Inhalt, padding, border und margin. Diese vier Bereiche bestimmen zusammen die Darstellung.

.box {
    width: 300px;
    padding: 20px;
    border: 1px solid #cbd5e1;
    margin: 24px;
}

Inhalt der Box

Aussen: Margin, dann Border, dann Padding, innen der Inhalt.

Mit box-sizing: border-box wird das Rechnen mit Breiten oft einfacher.

Weiter →