CSS 06: Box-Modell, Padding, Margin & Border 📦

Willkommen in Modul 06!

In dieser Einheit meisterst du das Fundament jedes CSS-Layouts: Das Box-Modell, box-sizing: border-box, Innen- und Außenabstände sowie Margenkollaps.

💡 1. Das Wichtigste in Kürze

Die Schichten des Box-Modells

Content: Der eigentliche Text- oder Bildinhalt (width, height).
Padding: Der Innenabstand zwischen Inhalt und Rahmen.
Border: Der sichtbare Rahmen um das Element herum.
Margin: Der Außenabstand zu benachbarten Elementen.

Der moderne Border-Box Reset

*, *::before, *::after {
  box-sizing: border-box;
}

Verhindert, dass padding und border die deklarierte Gesamtbreite vergrößern.

Margin Auto & TRBL-Shorthands

margin: 0 auto;: Zentriert einen Block-Container mit definierter max-width horizontal im Fenster.
padding: 10px 20px;: Oben/Unten 10px, Links/Rechts 20px.
display: inline-block: Ermöglicht Breiten-, Höhen- und Margin/Padding-Angaben auf Text-Elementen (wie Badges).

🎯 Teilziele in `aufgabe.html`

Box-Sizing Reset: Wende box-sizing: border-box auf *, *::before, *::after an.
Container Zentrieren: Style .card-container mit max-width, margin: 0 auto und padding.
Card-Box: Style .profile-card mit padding, border, border-radius und Hintergrund.
Vertikaler Abstand: Setze margin-bottom auf Überschriften und Absätze.
Inline-Block Badges: Style .skill-badge mit display: inline-block, padding, margin-right und border-radius.

1.6 KiB Raw Blame History