Das CSS Box-Modell

Das Box-Modell ist eines der wichtigsten Konzepte in CSS. Jedes HTML-Element wird vom Browser als rechteckige Box behandelt. Wenn du verstehst, wie diese Boxen aufgebaut sind, kannst du Layouts praezise kontrollieren.

Die vier Schichten

Jede CSS-Box besteht aus vier Schichten (von innen nach aussen):

┌─────────────────────────── Margin ────────────────────────────┐
│                                                                │
│   ┌─────────────────────── Border ───────────────────────┐    │
│   │                                                       │    │
│   │   ┌─────────────────── Padding ──────────────────┐   │    │
│   │   │                                               │   │    │
│   │   │   ┌───────────── Content ───────────────┐    │   │    │
│   │   │   │                                      │    │   │    │
│   │   │   │        Dein Inhalt hier              │    │   │    │
│   │   │   │                                      │    │   │    │
│   │   │   └──────────────────────────────────────┘    │   │    │
│   │   │                                               │   │    │
│   │   └───────────────────────────────────────────────┘   │    │
│   │                                                       │    │
│   └───────────────────────────────────────────────────────┘    │
│                                                                │
└────────────────────────────────────────────────────────────────┘

Schicht	Beschreibung	CSS-Eigenschaft
Content	Der eigentliche Inhalt (Text, Bild)	width, height
Padding	Innenabstand (zwischen Inhalt und Rahmen)	padding
Border	Der Rahmen	border
Margin	Aussenabstand (zwischen Element und Nachbarn)	margin

Content: Breite und Hoehe

.box {
    width: 300px;
    height: 200px;
}

Maximale und minimale Groessen

.responsive-box {
    width: 100%;          /* Volle Breite des Elternelements */
    max-width: 800px;     /* Aber nicht breiter als 800px */
    min-width: 200px;     /* Und nicht schmaler als 200px */

    min-height: 100px;    /* Mindestens 100px hoch */
    /* height weglassen -- passt sich dem Inhalt an */
}

Padding: Der Innenabstand

Padding erzeugt Platz zwischen dem Inhalt und dem Rahmen:

/* Alle Seiten gleich */
.box { padding: 20px; }

/* Oben/Unten und Links/Rechts */
.box { padding: 10px 20px; }

/* Oben, Links/Rechts, Unten */
.box { padding: 10px 20px 30px; }

/* Oben, Rechts, Unten, Links (Uhrzeigersinn) */
.box { padding: 10px 20px 30px 40px; }

/* Einzelne Seiten */
.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Merkhilfe: Die Uhrzeiger-Regel

Die Kurzschreibweise folgt dem Uhrzeigersinn: Top, Right, Bottom, Left (TRBL — sprich “trouble”).

Border: Der Rahmen

/* Kurzschreibweise: Breite Stil Farbe */
.box { border: 2px solid #333; }

/* Einzelne Seiten */
.box {
    border-top: 3px solid #e44d26;
    border-bottom: 1px dashed #ccc;
}

/* Nur einzelne Eigenschaften */
.box {
    border-width: 2px;
    border-style: solid;  /* solid, dashed, dotted, double, none */
    border-color: #333;
}

/* Abgerundete Ecken */
.box {
    border-radius: 8px;           /* Alle Ecken */
    border-radius: 50%;           /* Kreis */
    border-radius: 8px 0 8px 0;   /* Diagonal abgerundet */
}

Border-Styles

.solid  { border: 2px solid #333; }   /* Durchgezogen */
.dashed { border: 2px dashed #333; }  /* Gestrichelt */
.dotted { border: 2px dotted #333; }  /* Gepunktet */
.double { border: 4px double #333; }  /* Doppelt */
.none   { border: none; }              /* Kein Rahmen */

Margin: Der Aussenabstand

Margin erzeugt Platz zwischen dem Element und seinen Nachbarn:

/* Gleiche Kurzschreibweise wie Padding */
.box { margin: 20px; }
.box { margin: 10px 20px; }
.box { margin: 10px 20px 30px 40px; }

/* Einzelne Seiten */
.box { margin-top: 2rem; }

/* Horizontal zentrieren */
.centered {
    width: 800px;
    margin: 0 auto;  /* auto = gleichmaessig links und rechts */
}

Margin Collapse

Ein wichtiges (und oft verwirrendes) Konzept: Vertikale Margins verschmelzen!

.element-1 { margin-bottom: 30px; }
.element-2 { margin-top: 20px; }

/* Der Abstand zwischen beiden ist 30px (nicht 50px!) */
/* Der groessere Margin gewinnt */

Das passiert nur vertikal, nicht horizontal. Und es passiert nicht bei:

• Flexbox- oder Grid-Containern
• Elementen mit Padding oder Border dazwischen
• Float-Elementen

Box-Sizing: Das Problem und die Loesung

Das Problem: Content-Box (Standard)

Standardmaessig werden width und height nur fuer den Content berechnet. Padding und Border kommen oben drauf:

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
}

/* Tatsaechliche Breite: 300 + 20 + 20 + 5 + 5 = 350px! */

Die Loesung: Border-Box

Mit box-sizing: border-box werden Padding und Border innerhalb der angegebenen Breite berechnet:

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
}

/* Tatsaechliche Breite: 300px (Content wird automatisch kleiner) */

Best Practice: Global auf Border-Box setzen

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

Das sollte in jedem Projekt als erstes stehen!

Outline vs. Border

.box {
    /* Border nimmt Platz ein */
    border: 2px solid blue;

    /* Outline nimmt KEINEN Platz ein */
    outline: 2px solid red;
    outline-offset: 4px;  /* Abstand zum Element */
}

Outline wird hauptsaechlich fuer Fokus-Indikatoren verwendet:

button:focus {
    outline: 2px solid #264de4;
    outline-offset: 2px;
}

Box-Shadow: Schatten

/* Grundlegender Schatten */
.box {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /*          x  y  blur  farbe */
}

/* Mehrere Schatten */
.card {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Innerer Schatten */
.inset {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Glow-Effekt */
.glow {
    box-shadow: 0 0 20px rgba(228, 77, 38, 0.4);
}

Overflow: Inhalt der ueberlaeuft

Was passiert, wenn der Inhalt groesser als die Box ist?

.box {
    width: 200px;
    height: 100px;
    overflow: visible;  /* Standard: Inhalt ragt heraus */
    overflow: hidden;   /* Inhalt wird abgeschnitten */
    overflow: scroll;   /* Scrollbalken immer anzeigen */
    overflow: auto;     /* Scrollbalken nur bei Bedarf */
}

/* Nur horizontal oder vertikal */
.box {
    overflow-x: auto;
    overflow-y: hidden;
}

Praktisches Beispiel: Eine Card-Komponente

<div class="card">
    <img src="https://picsum.photos/400/200" alt="Platzhalterbild">
    <div class="card-content">
        <h3>Kartentitel</h3>
        <p>Eine kurze Beschreibung der Karte mit etwas Text.</p>
        <button>Mehr lesen</button>
    </div>
</div>

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

.card {
    width: 100%;
    max-width: 400px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 1.5rem;
}

.card-content h3 {
    margin: 0 0 0.5rem;
    color: #1a1a2e;
}

.card-content p {
    color: #4a5568;
    margin: 0 0 1rem;
    line-height: 1.6;
}

.card-content button {
    background: #e44d26;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
}

.card-content button:hover {
    background: #c0392b;
}

Uebungen

Uebung 1: Box-Modell untersuchen

Oeffne die Browser-DevTools (F12) und untersuche verschiedene Elemente. Schau dir das Box-Modell-Diagramm an und identifiziere Content, Padding, Border und Margin.

Uebung 2: Card-Komponenten

Erstelle drei Card-Komponenten nebeneinander mit:

• Bild oben
• Titel und Beschreibungstext
• Button unten
• Schatten und abgerundete Ecken

Uebung 3: Zentriertes Layout

Erstelle eine Seite mit einem zentrierten Container (max-width: 800px; margin: 0 auto;) und verschiedenen Abschnitten mit passendem Padding und Margin.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du Display und Position — wie Elemente auf der Seite platziert werden:

• Display-Typen (block, inline, flex, grid)
• Positionierung (relative, absolute, fixed, sticky)

Zusammenfassung

• Jedes Element ist eine Box mit Content, Padding, Border und Margin
• Padding = Innenabstand, Margin = Aussenabstand
• box-sizing: border-box ist ein Muss — setzt es global!
• Vertikale Margins verschmelzen (Margin Collapse)
• margin: 0 auto zentriert Block-Elemente horizontal
• box-shadow erzeugt Schatten — kombiniere mehrere fuer Tiefe
• overflow kontrolliert, was mit ueberfliessendem Inhalt passiert

---