CSS lernen - Mit dem Box Modell die Elemente visuell ausrichten

Was ist Box-Modell und wozu dient es?

Jedes Element, das auf einer Webseite visuell dargestellt werden kann, besteht aus einem oder mehreren rechteckigen Kästchen. as CSS-Box-Modell beschreibt, wie diese rechteckigen Boxen auf einer Webseite angeordnet sind.

Diese Boxen können unterschiedliche Eigenschaften haben und auf unterschiedliche Weise miteinander interagieren. Aber eins haben Sie alle gemeinsam: Sie alle besitzen:

• Inhaltsbereich
• Rahmenbereiche (Border)
• Innere Abstandsbereiche (Padding)
• Randbereiche (Margin)

Die folgende Illustration soll Ihnen etwas verdeutlichen, welche CSS-Eigenschaft (width, height, padding, border und margin, wo am Element zu finden ist.

Padding (Innenabstand) ist der transparente Raum zwischen dem Inhalt des Elements und dessen Rahmens (also der Border). Margin(Außenabstand) ist der transparente Raum um den Rahmen des Elementes.

Wenn ein Element eine Hintergrundfarbe hat, ist es auch durch seinen Füllbereich sichtbar. Der Padding-Bereich bleibt immer transparent, wird also von der Hintergrundfarbe des Elements beeinflusst. So ändert sich die Farbe des Padding-Bereiches auch mit Änderung des Hintergrundes des eigentlichen Elementes. Auf den Margin-Bereich (Außenabstand) hat die Hintergrundfarbe keinen Einfluss.

Breite und Höhe der Elemente

Wenn Sie die Breite und Höhe eines Elements mithilfe von CSS width und height-Eigenschaften festlegen, legen Sie eigentlich nur die Breite und Höhe des Inhaltsbereichs dieses Elements fest. Die tatsächliche Breite und Höhe der Box des Elements hängt von mehreren Faktoren ab. Der gesamte genutzte Raum, den die Box eines Elements auf einer Webseite einnehmen kann, wird wie folgt berechnet:

Sie werden jede dieser CSS-Eigenschaften in den kommenden Kapiteln detailliert kennenlernen. Zum Abschluss noch ein Beispiel wie die Positions- und Größeneigenschaften per CSS definiert werden:

div {
    width: 300px;
    height: 200px;
    padding: 15px; 
    /* padding wird hierbei für alle 4 Seiten gesetzt */

    border: 10px solid black; 
    /* das Aussehen des Rahmens wird auch hier für alle 4 Seiten gesetzt */
    
    margin: 20px auto; 
    /* zwei werte werden in "oben und unten" und "links und rechts" aufgeteilt 
    somit ist der Außenabstand oben und unten 20px. Die Ausrichtung
    für links und rechts ist "auto" - also im übergeordneten Element zentriert*/
}