Dies ist eine alte Version des Dokuments!
LU03a - CSS-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;
}