Das Box-Modell (Warum Abstände alles verändern)

💡 Die Kernidee im Alltag:

"Jedes Element im Browser – wirklich jedes einzelne – ist im Grunde ein unsichtbarer rechteckiger Karton. Wenn du diesen Karton verstehst, verlierst du nie wieder die Nerven bei Abständen."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

So berechnet der Browser den Platzbedarf:

+---------------------------------------+
|                MARGIN (Außenabstand)  |
|  +---------------------------------+  |
|  |             BORDER (Rahmen)     |  |
|  |  +---------------------------+  |  |
|  |  |          PADDING (Polster)|  |  |
|  |  |  +---------------------+  |  |  |
|  |  |  |       CONTENT       |  |  |  |
|  |  |  |     (Der Text)      |  |  |  |
|  |  |  +---------------------+  |  |  |

.karton {
  padding: 20px; /* Luft im Inneren */
  border: 2px solid #e2e8f0; /* Die Kiste */
  margin: 16px; /* Abstand zur nächsten Kiste */
}

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Cursor / ChatGPT

Golden Prompt für deinen Editor:

Warum verschiebt mein Button das Nachbarelement, wenn ich einen Rahmen hinzufüge? Wie löse ich das mit box-sizing: border-box?

Qualitäts-Prüfung: Die Antwort muss den Standardwert `content-box` erklären und empfehlen, `* { box-sizing: border-box; }` global zu setzen.

Vorherige Lektion: Farben und Schriften (Der visuelle Einstieg)

Nächste Lektion: Flexbox leicht gemacht (Elemente wie Magnete anordnen)

Interaktive Übung & lokaler Testlauf

Gib der Klasse `.box` einen Innenabstand von `padding: 24px;` und einen Rahmen von `border: 2px solid green;`.