replace ascii box-model with diagram, expand explanation

2026-04-20 10:59:00 +02:00
parent fb361a2854
commit b3c0994b7e
3 changed files with 64 additions and 15 deletions
@@ -2175,22 +2175,18 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen

 # Box-Modell

-```
-┌─────────────────────────────────────┐
-│              margin                 │
-│   ┌─────────────────────────────┐   │
-│   │          border             │   │
-│   │   ┌─────────────────────┐   │   │
-│   │   │       padding       │   │   │
-│   │   │   ┌─────────────┐   │   │   │
-│   │   │   │   content   │   │   │   │
-│   │   │   └─────────────┘   │   │   │
-│   │   └─────────────────────┘   │   │
-│   └─────────────────────────────┘   │
-└─────────────────────────────────────┘
-```
+![bg right:42% fit](./assets/demos/box-model-diagram.png)

-Jedes Element ist eine Box.
+Jedes HTML-Element ist eine rechteckige **Box**.
+
+**Schichten innen → außen:**
+
+- **content** – Inhalt (Text, Bild)
+- **padding** – Innenabstand
+- **border** – Rahmen
+- **margin** – Außenabstand
+
+<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>

 <!--
 SPEAKER NOTES: