CSS Box Model

Die Grundlage jedes Layouts

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).

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:

• vergrössert die Box nach innen
• nimmt die Hintergrundfarbe des Elements an
• beeinflusst die tatsächliche Grösse des Elements

padding ist einzeln steuerbar:

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

Hinweis: padding kann keine negativen Werte annehmen – im Gegensatz zu margin.

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  */ 

Responsive Padding mit clamp()

clamp() funktioniert nicht nur bei Schriftgrössen, sondern bei jedem Längenwert – auch bei padding. So skaliert der Innenabstand automatisch mit der Bildschirmgrösse, ganz ohne Media Query.

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

---

3. Border (Rahmen)

Der border umschliesst Content + Padding.

div {
  border: 2px solid black;
}

Eigenschaften:

• zählt zur Gesamtgrösse
• liegt ausserhalb des Padding
• hat keine eigene Hintergrundfarbe

Alle Boder definitionen findest du unter Border

---

4. Margin (Aussenabstand)

margin ist der Abstand zu anderen Elementen.

div { margin: 30px; }

Eigenschaften:

• transparent
• gehört nicht zur eigentlichen Box
• kann negativ sein

Margin Collapsing

Vertikale Margins können zusammenfallen:

p { margin: 20px 0; }

Zwei Absätze untereinander → Abstand 20px, nicht 40px!
Das passiert nur vertikal, nicht horizontal und nicht bei Flexbox/Grid.

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.

---

Die echte Grösse eines Elements (Standard!)

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

Tatsächliche Breite:
200 (content)
+ 40 (padding links + rechts)
+ 10 (border links + rechts)
= 250px

---

box-sizing

Standard: content-box

box-sizing: content-box;

• width & height gelten nur für den Content
• Padding & Border werden dazu addiert

Das ist der CSS-Standard – aber meist nicht das, was man will.

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 für alle Elemente, auch für Inline-Elemente. Allerdings verhalten sich Inline-Elemente in einigen Punkten anders – und genau das führt häufig zu Verwirrung.

Nehmen wir ein Inline-Element wie <span>:

span {
  padding: 10px;
  border: 2px solid red;
  margin: 20px;
}

• padding-left/rightvergrössert den Abstand horizontal
• padding-top/bottomsichtbar, beeinflusst aber nicht den Zeilenabstand
• borderwird vollständig gezeichnet
• margin-left/rightAbstand horizontal
• margin-top/bottomwird ignoriert
• width / heighthat keine Wirkung

Das Box Model existiert, aber nicht alle Teile wirken layout-relevant.

Wichtige Sonderrolle: inline-block
inline-block verhält sich wie ein Block-Element, bleibt aber im Textfluss.

---

Kurz gesagt

• content, padding, border, margin – die vier Schichten jeder Box, von innen nach aussen
• padding vergrössert die Box nach innen, nimmt die Hintergrundfarbe an, kann nicht negativ sein
• margin vergrössert die Box nach aussen, ist transparent, kann negativ sein und kollabiert bei aufeinandertreffenden vertikalen Rändern
• box-sizing: border-box zählt Padding und Border zur angegebenen Breite/Höhe dazu – meist global gesetzt
• Bei Inline-Elementen wirken nur padding-left/right, border und margin-left/right – width, height und vertikale Margins werden ignoriert
• inline-block bleibt im Textfluss, verhält sich sonst wie ein Block-Element

---