CSS-Box-Modell

Das CSS-Box-Modell ist eines der grundlegendsten Konzepte im Webdesign. Es definiert, wie jedes HTML-Element aufgebaut ist: Inhalt, Padding, Border und Margin bilden die Box um das Element.

Elemente des Box-Modells

Das Box-Modell besteht aus vier Hauptteilen: Inhalt (content), Innenabstand (padding), Rahmen (border) und Außenabstand (margin). Zusammen bestimmen sie die Gesamtgröße und Position eines Elements.

Im folgenden Beispiel wird ein <div>-Element mit Padding-, Border- und Margin-Einstellungen angezeigt:

Visuelle Beispiele des Box-Modells

Die folgenden Beispiele zeigen, wie Padding-, Border- und Margin-Werte das Erscheinungsbild eines Elements verändern.

Verwendung von box-sizing

Standardmäßig beziehen sich Breite und Höhe nur auf den Inhalt, Padding und Border werden addiert. Mit der Einstellung <box-sizing: border-box;> werden jedoch auch Padding und Border in die angegebenen Maße einbezogen.

Welche CSS-Eigenschaft fügt einer Box einen Rahmen hinzu?

Selected: padding (1/4)

paddingmarginborderoutline

div {
  width: 200px;
  padding: 20px;
  padding: 5px solid black;
  margin: 10px;
}

Move the slider to set the value, then check your answer.

Tipps zur Verwendung des Box-Modells

Die richtige Verwendung des Box-Modells ist für ein präzises Layout unerlässlich. Hier einige Tipps:

Verwende <box-sizing: border-box;> für berechenbarere Größen.
Lass immer genügend Abstand (margin) zwischen den Elementen, um die Lesbarkeit zu verbessern.
Experimentiere mit verschiedenen Padding- und Border-Werten, um ein harmonisches Design zu erzielen.