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)

Mit CSS-Eigenschaften lässt sich die Grösse des Content-Bereichs steuern. Ohne eine Angabe verwenden width und height den Standardwert auto. Ein Blockelement nutzt damit die verfügbare Breite, während seine Höhe mit dem Inhalt wächst.

  • widthBreite eines Elements
  • heightHöhe eines Elements

Feste Breite und Höhe

Mit width und height erhält eine Box eine feste Breite und Höhe. Ist der Inhalt höher als die festgelegte Höhe, kann vertikaler Overflow entstehen.

width: 300px;
height: 200px;

Relative Grössen

Eine Breite in Prozent passt sich dem verfügbaren Platz an.
rem bezieht sich auf die Schriftgrösse des Root-Elements <html>. Bei einer Standardschriftgrösse von 16px entsprechen 30rem einer Breite von 480px.

width: 100%;
width: 30rem;

Minimale und maximale Grösse

Mit min-width, max-width, min-height und max-height lassen sich Unter- und Obergrenzen festlegen.

  • min-widthDie Box darf nicht schmaler werden
  • max-widthDie Box darf nicht breiter werden
  • min-heightMinimale Höhe
  • max-heightMaximale Höhe

Minimale und maximale Grösse kombinieren

Eine Breite in Prozent passt sich dem verfügbaren Platz an. max-width begrenzt die Breite, während min-height eine Mindesthöhe festlegt. Bei mehr Inhalt darf die Box weiterwachsen.

.box {
  width: 100%;
  max-width: 700px;
  min-height: 200px;
}

Breite an den Inhalt anpassen

Mit fit-content richtet sich die Breite nach dem Inhalt, bleibt aber innerhalb des verfügbaren Platzes. Das Element bleibt dabei ein Blockelement – nur seine Breite verändert sich.

.box {
  width: fit-content;
}

Wichtig: Standardmässig beziehen sich width und height nur auf den Content-Bereich. Padding und Border werden zusätzlich zur angegebenen Grösse berechnet. Dieses Verhalten lässt sich mit box-sizing ändern.

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.