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

---

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.

---

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.

---