CSS Box Model

In CSS ist jedes Element eine Box. Egal ob div, p, button oder img – der Browser behandelt alles als rechteckige Box.

Vier Box-Schichten

Jede Box besteht aus vier Schichten – von innen nach aussen.

Darstellung des CSS Box Models mit Content, Padding, Border und Margin

  • Content Inhalt des Elements
  • Padding Abstand zwischen Inhalt und Rahmen
  • Border Rahmen um Inhalt und Innenabstand
  • Margin Abstand zu anderen Elementen

1. Content (Inhalt)

Der Content-Bereich enthält den eigentlichen Inhalt: Text, Bilder, Videos etc.

div {
  width: 200px;
  height: 100px;
}

Wichtig:
Die width und height beziehen sich standardmässig nur auf den Content, nicht auf Padding oder Border.

2. Padding (Innenabstand)

padding ist der Abstand zwischen Content und Border.

div { padding: 20px;}

Eigenschaften

  • schafft Abstand zwischen Inhalt und Rahmen
  • kann keine negativen Werte annehmen

Padding für alle vier Seiten

Der Innenabstand kann für jede Seite einzeln festgelegt werden.

padding-top
padding-right
padding-bottom
padding-left

3. Border (Rahmen)

Der border umschliesst Content + Padding.

div {
  border: 2px solid black;
}

Eigenschaften

  • umschliesst Content und Padding
  • zählt zur Gesamtgrösse des Elements

Nurse Alle Boder definitionen findest du unter Border

4. Margin (Aussenabstand)

margin ist der Abstand zu anderen Elementen.

div { margin: 30px; }

Eigenschaften

  • liegt ausserhalb des Rahmens
  • gehört nicht zur Grösse der Box
  • kann negative Werte annehmen

Margin Collapsing

Zwei Absätze untereinander haben einen Abstand von 20px, nicht 40px. Das passiert nur vertikal, nicht horizontal und nicht bei Flexbox oder Grid. 

p {
  margin: 20px 0;
}

Horizontal zentrieren

Setzt man margin-left und margin-right auf auto, teilt der Browser den verfügbaren Platz gleichmässig auf beide Seiten auf – die Box wird horizontal zentriert. Voraussetzung: das Element braucht eine feste width, sonst nimmt es die volle Breite ein und es bleibt kein Platz zum Verteilen.

div {
  width: 300px;
  margin: 0 auto;
}

Wichtig: Funktioniert im normalen Dokumentfluss nur horizontal – vertikales Zentrieren mit margin: auto braucht zusätzlich Flexbox oder Grid auf dem Elternelement.

Kurzschreibweise

Die Angaben werden im Uhrzeigersinn geladen und starten oben.

padding: 10px 20px; /* oben/unten | links/rechts */

padding: 1px 5px 15px; /* oben | links/rechts | unten */ 
padding: 10px 5px 15px 50px; /* oben | links | unten | rechts  */

Logische Eigenschaften

Eigenschaften wie padding-top oder margin-left beziehen sich auf feste Seiten einer Box. Logische Eigenschaften orientieren sich dagegen an der Schreib- und Leserichtung.

Bei einer horizontalen Schreibrichtung von links nach rechts entsprechen die logischen Richtungen folgenden Seiten:

  • blockAchse der untereinander angeordneten Inhalte (oben/unten)
  • block-startAnfang der Blockachse (oben)
  • block-endEnde der Blockachse (unten)
  • inlineAchse innerhalb einer Textzeile (links/rechts)
  • inline-startAnfang der Inlineachse (links)
  • inline-endEnde der Inlineachse (rechts)

Innen- und Aussenabstände können für jede logische Seite einzeln festgelegt werden. Alle logischen Seitenangaben funktionieren mit padding und margin.

padding-block-start: 2rem;
padding-block-end: 4rem;

padding-inline-start: 1rem;
padding-inline-end: 3rem;

Kurzschreibweise

Mit padding-block und padding-inline werden beide Seiten einer Achse zusammengefasst.

padding-block: 2rem;  /* oben und unten */
padding-inline: 1rem; /* links und rechts */

Bei zwei Werten steht der erste für den Anfang und der zweite für das Ende der jeweiligen Achse. 

padding-block: 2rem 4rem;  /* block-start | block-end */
padding-inline: 1rem 3rem; /* inline-start | inline-end */

Horizontal zentrieren

Mit margin-inline: auto kann eine Box horizontal zentriert werden.

div {
  width: 300px;
  margin-inline: auto;
}

Bei einer vertikalen Schreibrichtung, beispielsweise bei traditionellem Japanisch mit writing-mode: vertical-rl, passen sich die logischen Richtungen automatisch an. Der CSS-Code muss dafür nicht auf andere Seitenangaben umgeschrieben werden.

Dynamische Abstände mit clamp()

clamp() funktioniert nicht nur bei Schriftgrössen, sondern bei jedem Längenwert – auch bei padding und margin. So skalieren die Abstände automatisch mit der Bildschirmgrösse, ganz ohne Media Query.

div {
  padding: clamp(1rem, 4vw, 3rem);
  margin: clamp(1rem, 4vw, 3rem);
}

box-sizing

Box-Sizing: Berechnung der Box Grösse

Standard: content-box

box-sizing: content-box;
  • width & height gelten nur für den Content
  • Padding & Border werden dazu addiert
div {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
}

Tatsächliche Breite

200 (content)
+ 40 (padding links + rechts)
+ 10 (border links + rechts)
= 250px

box-sizing: border-box (Best Practice)

box-sizing: border-box;

Bedeutung:
width & height beinhalten: Content, Padding und Border

div {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  box-sizing: border-box;
}

Gesamtbreite bleibt 200px. Der Content wird automatisch kleiner gerechnet.

Warum fast alle border-box nutzen

  • Layouts sind vorhersehbar
  • Keine Überraschungen bei Breiten
  • Perfekt für Responsive Design
  • Weniger Rechenarbeit im Kopf

Global setzen (sehr verbreitet)

*,
*::before,
*::after {
  box-sizing: border-box;
}

Box Model & Inline-Elemente

Das Box Model gilt auch für Inline-Elemente. Einige Eigenschaften beeinflussen das Layout jedoch anders als bei Block-Elementen.

Beispiel mit einem Inline-Element wie <span>:

span {
  padding: 10px;
  border: 2px solid red;
  margin: 20px;
}
  • padding-left/right schafft horizontal zusätzlichen Platz
  • padding-top/bottom wird gezeichnet, verändert aber die Zeilenhöhe nicht
  • border wird vollständig gezeichnet, verändert aber die Zeilenhöhe nicht
  • margin-left/right schafft horizontal Abstand
  • margin-top/bottom hat keine Wirkung auf das Layout
  • width / height hat keine Wirkung

Inline-Block

inline-block verbindet Eigenschaften von Inline- und Block-Elementen. Das Element kann innerhalb einer Zeile stehen, gleichzeitig wirken width, height, Padding und Margin wie bei einem Block-Element.

Kurz gesagt

  • content, padding, border und margin bilden die vier Schichten einer Box.
  • padding schafft Abstand zwischen Inhalt und Rahmen und kann nicht negativ sein.
  • margin schafft Abstand zu anderen Elementen, kann negativ sein und vertikal zusammenfallen.
  • Bei content-box werden Padding und Border zur angegebenen Breite und Höhe addiert.
  • Bei border-box sind Padding und Border bereits in der angegebenen Breite und Höhe enthalten.
  • Logische Eigenschaften wie padding-block und margin-inline orientieren sich an der Schreib- und Leserichtung.
  • Bei Inline-Elementen verändern vertikales Padding und Border die Zeilenhöhe nicht. Vertikale Margins sowie width und height haben keine Wirkung.
  • Mit inline-block wirken Breite, Höhe und alle Abstände.