Was ist das Box-Modell?

Ein CSS Layout ist grundsätzlich aus rechteckigen Boxen aufgebaut. Diese Boxen basieren alle auf dem gleichen Schema, welches Box-Modell genannt wird. Es beschreibt, wie Elemente auf einer Webseite berechnet und angezeigt werden.

Breite und Höhe eines Elements

Die Breite und Höhe eines Elements zu bestimmen, stellt sich manchmal als sehr schwierig dar. Nicht all zu selten lässt man sich vom Code-Inspector eines Browsers oder mithilfe von Javascript eine Breite berechnen, die wir so gar nicht angegeben haben. Das folgende Schaubild soll die tatsächlichen Maße eines Elements einmal verdeutlichen:

Box-Modell eines Elements - CodingLab

Wollen wir die Breite eines Elements bestimmen, so benötigen wir zunächst den Wert, den wir bei der Eigenschaft width gesetzt haben. Als nächstes benötigen wir den Innenabstand (padding) zum linken und rechten Rand des Elements sowie die doppelte Breite des Rahmens (border-width). Wichtig ist, dass der Außenabstand nicht zu den Maßen eines Elements zählt.

Inhaltsbereich

Als Inhaltsbereich wird alles zusammengefasst, was in einem Element steht. Darunter fallen nicht nur Texte, Bilder und Videos, sondern auch andere Elemente. Zu Beachten ist dabei, dass wir den Inhaltsbereich ohne jegliche Abstandsangaben, wie padding und margin betrachten. Diese zählen zu anderen Themen.

  • Html
  • Ergebnis
<html> <head></head> <body> <div style="min-width: 300px; width: 300px; max-width: 300px; padding: 20px; margin: 0;"> <p>Ein Paragraphentext</p> <img src="" alt="Ein Bild"> <video src="https://www.coding-lab.de/res/tutorials/web/css/big-buck-bunny.mp4" controls></video> <audio src="https://www.coding-lab.de/res/tutorials/web/css/jazz.mp3" controls></audio> </div> </body> </html>

Der Inhaltsbereich des obigen Beispiels ist 300px lang und umfasst den Paragrafen, das Bild, das Video und das Audio. Nicht mehr und nicht weniger. Der Innenabstand von 20px und der Außenabstand von 50px gehört nicht dazu.

Innenabstand

Unter dem Innenabstand verstehen wir in CSS den Raum zwischen Inhaltsbereich und Rahmen des Elements. Mit der Eigenschaft padding können wir den Innenabstand definieren. Dafür liegen uns für alle vier Seiten eines Elements unterschiedliche Versionen vor:

EigenschaftBeschreibung
padding-topDefiniert den Innenabstand oben.
padding-rightDefiniert den Innenabstand rechts.
padding-bottomDefiniert den Innenabstand unten.
padding-leftDefiniert den Innenabstand links.

Des Weiteren können wir mit der zusammengefassten Eigenschaft padding alle vier Innenabstände in einer Anweisung definieren. Dafür stehen uns vier Möglichkeiten zur Verfügung:

BeispielBeschreibung
padding: wert1wert1: Innenabstand für alle Richtungen.
padding: wert1 wert2wert1: Innenabstand für oben und unten.

wert2: Innenabstand für links und rechts.
padding: wert1 wert2 wert3wert1: Innenabstand für oben.

wert2: Innenabstand für rechts.

wert3: Innenabstand für unten und links.
padding: wert1 wert2 wert3 wert4wert1: Innenabstand für oben.

wert2: Innenabstand für rechts.

wert3: Innenabstand für unten.

wert4: Innenabstand für links.
  • Html
  • Ergebnis
<p style="padding: 10px 20px 30px; border: 1px solid red;"> Oben: 10px Rechts: 20px Unten: 30px Links: 30px </p>

Das obige Beispiel definiert einen Innenabstand nach oben von 10px, nach rechts von 20px, nach unten und links von 30px.

Rahmen

Der Rahmen umrandet das Element, ähnlich, wie bei einem Bild. Mit der Eigenschaft border können wir den Rahmen definieren. Dafür liegen uns für alle vier Seiten eines Elements unterschiedliche Versionen vor:

EigenschaftBeschreibung
border-topDefiniert den Rahmen oben.
border-rightDefiniert den Rahmen rechts.
border-bottomDefiniert den Rahmen unten.
border-leftDefiniert den Rahmen links.

Weiterhin haben wir die Möglichkeit dem Rahmen eine Farbe (border-color), einen Style (border-style) und eine Breite (border-width) mitzugeben, wobei die Abfolge wie folgt ist:

border-top: Breite Style Farbe;

  • Html
  • Ergebnis
<p style="width: 100px; height: 100px; border-top: 1px solid red; border-right: 5px dashed blue; border-bottom: 10px dotted green; border-left: 15px double black;"> </p>

Das obige Beispiel definiert einen Paragraphen mit vier unterschiedlichen Rahmen an jeder Seite. Wenn wir wissen, dass alle Seiten den gleichen Rahmen haben, können wir mit der zusammengefassten Eigenschaft border alle vier in einer Anweisung definieren:

  • Html
  • Ergebnis
<p style="width: 100px; height: 100px; border: 1px solid red;"> </p>

Auch wenn der Rahmen nicht gesetzt ist bzw. eine Breite von 0px zugewiesen bekommt, ist er dennoch vorhanden. Das folgende Beispiel zeigt einen Rahmen, der eine Breite von 0px hat, jedoch mit der Eigenschaft border-radius sichtbar gemacht wird:

  • Html
  • Ergebnis
<p style="padding: 100px; background: red; border: 0; border-radius: 20px;"> Ein unsichtbarer-sichtbarer Rahmen. </p>

Außenabstand

Als Außenabstand bezeichnen wir den Raum nach dem Elementrahmen. Es wäre falsch zu sagen, dass es sich hierbei um den Raum zwischen zwei Elementen handelt, denn dieser würde aus zwei Außenabständen bestehen. Mit der Eigenschaft margin können wir den Außenabstand definieren. Dafür liegen uns für alle vier Seiten eines Elements unterschiedliche Versionen vor:

EigenschaftBeschreibung
margin-topDefiniert den Außenabstand oben.
margin-rightDefiniert den Außenabstand rechts.
margin-bottomDefiniert den Außenabstand unten.
margin-leftDefiniert den Außenabstand links.

Des Weiteren können wir mit der zusammengefassten Eigenschaft margin alle vier Außenabstände in einer Anweisung definieren. Dafür stehen uns vier Möglichkeiten zur Verfügung:

BeispielBeschreibung
margin: wert1wert1: Außenabstand für alle Richtungen.
margin: wert1 wert2wert1: Außenabstand für oben und unten.

wert2: Außenabstand für links und rechts.
margin: wert1 wert2 wert3wert1: Außenabstand für oben.

wert2: Außenabstand für rechts.

wert3: Außenabstand für unten und links.
margin: wert1 wert2 wert3 wert4wert1: Außenabstand für oben.

wert2: Außenabstand für rechts.

wert3: Außenabstand für unten.

wert4: Außenabstand für links.
  • Html
  • Ergebnis
<p style="margin: 20px 20%; border: 1px solid red;"> Oben: 20px Rechts: 20% Unten: 20px Links: 20% </p> <p style="margin: 20px 20%; border: 1px solid red;"> Oben: 20px Rechts: 20% Unten: 20px Links: 20% </p>

Das obige Beispiel definiert einen Außenabstand nach oben und unten von 20px und einen Seitenabstand von 20%.