CSS Box (Box-Modell)

Das CSS-Rahmenmodell beschreibt, wie Elemente auf der Webseite intuitiv angeordnet werden.

Was ist das Box-Modell

Jeder darstellbaren Element enthält einen oder mehrere Rechteckrahmen. Der CSS-Rahmenmodell beschreibt normalerweise, wie diese Rechteckrahmen auf der Webseite angeordnet werden. Diese Rahmen können unterschiedliche Eigenschaften haben und sich auf unterschiedliche Weise gegenseitig beeinflussen, aber jeder Rahmen hat einen Inhaltsbereich sowie optionale Umrandungen, Margen und Ränder.

Das folgende Diagramm zeigt, wie die CSS-Eigenschaften margin, padding und border den verfügbaren Raum des Elements auf der Webseite bestimmen.

Breite und Höhe des Elements

Normalerweise, wenn Sie CSS verwenden widthundheightWenn Sie die Breite und Höhe eines Elements mit den Eigenschaften einstellen, stellen Sie tatsächlich nur die Breite und Höhe des Inhaltsbereichs des Elements ein. Die tatsächliche Breite und Höhe des Elements hängt von mehreren Faktoren ab.

Der tatsächliche Raum, den der Elementrahmen möglicherweise einnimmt, wird so berechnet:

Die verschiedenen Verwendungsmethoden der verschiedenen Eigenschaften, die in den folgenden Kapiteln gegeben werden.