LU03a - Box-Modell

Als Grundlage für das Positionieren von Elementen und das Erstellen eines Layouts dient in CSS das Box-Model (oder auch Kastenmodell). In diesem Teil werden das klassische und das neue, intuitivere Box-Modell vorgestellt.

Das klassische Box-Modell

Das klassische Box-Modell besteht aus vier Bereichen:

Content (Inhalt)
Padding (Innenabstand)
Border (Rahmen)
Margin (Aussenabstand)

Jede dieser Boxen kann in top, right, bottom und left unterteilt werden.

Innenabstand angeben

Die CSS-Eigenschaft padding legt den Innenabstand fest.

Beispiel:

div {
    padding: 10px;
}

Den Rahmen erstellen

Die CSS-Eigenschaft border bestimmt den Rahmen eines Elements.

Beispiel:

div {
    border: 2px solid black;
}

Den Aussenabstand

Die CSS-Eigenschaft margin legt den Aussenabstand zu anderen Elementen fest.

Beispiel:

div {
    margin: 20px;
}

Zusammenfallende vertikale Aussenabstände (Collapsing Margins)

Wenn sich zwei vertikale Margins treffen, verschmelzen sie zum grösseren Wert.

Das neue Box-Modell

Im neuen Box-Modell wird padding und border in die Breite und Höhe eines Elements eingerechnet.

Beispiel:

div {
    box-sizing: border-box;
}

Das neue Box-Modell verwenden

Das neue Box-Modell kann mit der CSS-Eigenschaft box-sizing: border-box aktiviert werden.

Beispiel 1 (Einzelne Elemente):

div {
    box-sizing: border-box;
}

Beispiel 2 (Alle Elemente):

* {
    box-sizing: border-box;
}