In diesem Tutorial erfahren Sie, wie Sie HTML-Elemente mit Hilfe des Box-Modells in CSS ausrichten bzw. positionieren können.
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:
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.
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:
Gesamtbreite = width
+ padding-left
+ padding-right
+ border-left
+ border-right
+ margin-left
+ margin-right
Gesamthöhe = height
+ padding-top
+ padding-bottom
+ border-top
+ border-bottom
+ margin-top
+ margin-bottom
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*/
}
Hinweis: Im CSS-Box-Modell ist der Inhaltsbereich der Box eines Elements genau der Bereich, in dem sein Inhalt, zB Text, Bild, Video usw., erscheint. Es kann auch weitere Elemente (z.B. DIV-Boxen) für untergeordnete Elemente enthalten.