Modul 05
Das Box-Modell
Box-Modell
CSS Box Model – kein Akronym, sondern ein Grundkonzept von CSS
- Jedes Element ist eine Box
- der Browser behandelt ausnahmslos jedes HTML-Element als rechteckige Box, egal ob es sich um Text, ein Bild oder einen Button handelt.
- Vier Schichten
- von innen nach außen: Content (der eigentliche Inhalt), Padding (Innenabstand), Border (Rahmen) und Margin (Außenabstand zu Nachbarelementen).
Kurz gesagt: Das Box-Modell bestimmt, wie viel Platz ein Element auf der Seite tatsächlich einnimmt – die Grundlage für jedes Layout, auch für Flexbox und Grid.
margin 24px
border 4px
padding 20px
CONTENT
160 × 90
Werkstatt-Regler
Warum wird meine Box größer als erwartet?
Standardmäßig addieren Padding und Border zur angegebenen Breite dazu. box-sizing: border-box rechnet beide mit ein, statt sie draufzuschlagen.
Padding vs. Margin
Padding schafft Abstand innerhalb der Box, sichtbar durch die Hintergrundfarbe. Margin schafft Abstand außerhalb, zu den Nachbarelementen.
Margin Collapse
Vertikale Margins zweier benachbarter Blockelemente überlappen sich statt sich zu addieren. Ein Grund, warum Abstände manchmal kleiner ausfallen als gedacht.