From b3c0994b7e6755b64241670506ce7d8be737f297 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Mon, 20 Apr 2026 10:59:00 +0200 Subject: [PATCH] replace ascii box-model with diagram, expand explanation --- slides/223015c/02-netzwerke-protokolle-css.md | 26 ++++----- .../assets/demos/box-model-diagram.html | 53 ++++++++++++++++++ .../assets/demos/box-model-diagram.png | Bin 0 -> 15698 bytes 3 files changed, 64 insertions(+), 15 deletions(-) create mode 100644 slides/223015c/assets/demos/box-model-diagram.html create mode 100644 slides/223015c/assets/demos/box-model-diagram.png diff --git a/slides/223015c/02-netzwerke-protokolle-css.md b/slides/223015c/02-netzwerke-protokolle-css.md index a8ed890..b6e16b5 100644 --- a/slides/223015c/02-netzwerke-protokolle-css.md +++ b/slides/223015c/02-netzwerke-protokolle-css.md @@ -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 + +Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.