Webmaster-Crashkurs

CSS Box Modell Hierarchie

Das CSS-Box Modell besteht aus mehreren Eben. Zum besseren Verständnis ist es 3-Dimensional hier aufgebaut.

CSS Box Modell als 3D-Modell

Schauen wir uns den Aufbau nun Schritt für Schritt an.

Der HTML-Code - dort steht außer dem Inhalt, also dem Text, nicht viel:

<p>
    Hier kommt der Inhalt des …
</p>

Im Browser angezeigt bekommen wir in unserem 3-Dimensionalen Modell nun:

Inhalt im CSS Box Modell

Innenabstand im CSS Box Modell

Im nächsten Schritt fügen wir unserem Element einen Innenabstand hinzu. Dies geschieht über über die CSS-Anweisung: padding:30px;

p {
    padding: 30px;
}

In unserem Modell ist dieser Innenabstand anhand der gelben Farbe angedeutet. In Realität ist dieser Bereich 100% durchsichtig.

Innenabstand (padding) im CSS Box Modell

Rahmen im CSS Box Modell

Jetzt können wir einen Rahmen dem Element mitgeben. Der Rahmen in der Kurzschreibweise:

p {
    border: 1px solid blue;
}

Rahmen (border) im CSS Box Modell

Hintergrundfarbe im CSS Box Modell

Das Element hat auch eine Hintergrundfarbe – im Beispiel grau. Diese wird durch die CSS-Anweisung background-color: gesetzt

p {
    background-color: silver;
}

Hintergrundfarbe (background-color) im CSS Box Modell

Außenabstand im CSS Box Modell

Und unser Element hat einen Außenabstand. Dieser ist im Modell mit der hellblauen Farbe angedeutet. Diese ist in Realität auch durchsichtig. Der Außenabstand wird über die CSS-Anweisung margin: gesetzt.

p {
    margin: 30px;
}

Außenabstand (margin) im CSS Box Modell

Hintergrundbild im CSS Box Modell

Und das Element kann ein Hintergrundbild haben. Diese verdeckt dann komplett die Hintergrundfarbe. Das Hintergrundbild wird mit der CSS-Anweisung background-image: gesetzt

p {
    background-image: url(blaetter.jpg);
}

Hintergrundbild (background-image) im CSS Box Modell

Alle Bereich einstellbar im CSS Box Modell

Zum erwähnen ist noch, das sowohl für die Rahmen, wie für den Innenabstand wie für den Außenabstand für jede Seite ein andere Wert gesetzt werden kann. So sind z.B. Rahmen möglich, die auf jeder Seite eine andere Farbe haben und Elemente, die auf jeder Seite einen anderen Abstand zum nächsten Element halten.

Insgesamt sieht der CSS-Code für unser Beispiel wie folgt aus (die Reihenfolge der CSS-Anweisungen ist egal):

p {
    padding: 30px;
    border: 1px solid blue;
    background-color: silver;
    margin: 30px;
    background-image: url(blaetter.jpg);
}

Und unser fertiges Modell in Groß, an dem die Hierarchie zu sehen ist.

CSS Box Modell als 3D-Modell

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2025   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos • Impressum • Datenschutzerklärung
weitere eigene Projekte: