Kostenlose Tutorials für Anfänger

Appearance

Kapitel 9: Box-Modell ​

Das Box-Modell (Box Model) ist eines der wichtigsten Konzepte in CSS. Alles im Webdesign ist im Grunde genommen eine "Box"! In diesem Kapitel lernen Sie, wie das Box-Modell funktioniert.

9.1 Definition des Box-Modells: Alle Elemente sind "Boxen" ​

Jedes HTML-Element wird von einem rechteckigen Kasten (Box) umschlossen. Das Box-Modell beschreibt, wie dieser Kasten aufgebaut ist.

🎁 Analogie: Ein Geschenk paket ​

Stellen Sie sich ein HTML-Element wie ein Geschenk paket vor:

  1. Inhalt (Content): Das eigentliche Geschenk
  2. Polsterung (Padding): Das Füllmaterial um das Geschenk
  3. Rahmen (Border): Der Kasten selbst
  4. Außenabstand (Margin): Der Abstand zu anderen Paketen

📦 Die vier Schichten des Box-Modells ​

┌─────────────────────────────────────┐
│              Margin (Außenabstand)   │ <- Abstand zu anderen Elementen
│  ┌─────────────────────────────┐  │
│  │       Border (Rahmen)        │  │ <- Rahmen um das Element
│  │  ┌─────────────────────┐  │  │
│  │  │   Padding (Polsterung)│  │  │ <- Abstand innerhalb des Rahmens
│  │  │  ┌─────────────────┐ │  │  │
│  │  │  │   Content        │ │  │  │ <- Eigentlicher Inhalt
│  │  │  │   (Inhalt)      │ │  │  │
│  │  │  └─────────────────┘ │  │  │
│  │  └─────────────────────┘  │  │
│  └─────────────────────────────┘  │
└─────────────────────────────────────┘

9.2 Box-Modell-Komponenten im Detail ​

Lassen Sie uns jede Komponente im Detail betrachten!

1. Inhalt (Content) ​

Der eigentliche Inhalt des Elements (Text, Bilder, etc.).

Größe festlegen:

css
.box {
    width: 300px;  /* Breite des Inhalts */
    height: 200px; /* Höhe des Inhalts */
}

💡 Standardverhalten:

  • Block-Elemente (<div>, <p>, <h1>) nehmen standardmäßig die gesamte verfügbare Breite ein (width: 100%;)
  • Inline-Elemente (<span>, <a>) ignorieren width und height

2. Polsterung (Padding) ​

Der Innenabstand zwischen dem Inhalt und dem Rahmen.

Syntax:

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

/* Oben/unten und links/rechts separat */
.box {
    padding: 10px 20px; /* 10px oben/unten, 20px links/rechts */
}

/* Alle vier Seiten einzeln */
.box {
    padding-top: 10px;    /* Oben */
    padding-right: 20px;  /* Rechts */
    padding-bottom: 15px; /* Unten */
    padding-left: 25px;    /* Links */
}

Beispiel:

css
.card {
    width: 300px;
    height: 200px;
    padding: 20px; /* Innenabstand auf allen vier Seiten */
    background-color: #f0f0f0;
}

3. Rahmen (Border) ​

Der Rahmen um das Element (siehe Kapitel 8 für Details).

Beispiel:

css
.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid #3366cc; /* Rahmen */
}

4. Außenabstand (Margin) ​

Der Außenabstand zwischen dem Element und anderen Elementen.

Syntax:

css
/* Alle vier Seiten gleich */
.box {
    margin: 20px;
}

/* Oben/unten und links/rechts separat */
.box {
    margin: 10px 20px; /* 10px oben/unten, 20px links/rechts */
}

/* Alle vier Seiten einzeln */
.box {
    margin-top: 10px;    /* Oben */
    margin-right: 20px;   /* Rechts */
    margin-bottom: 15px;  /* Unten */
    margin-left: 25px;    /* Links */
}

Beispiel:

css
.card {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid #3366cc;
    margin: 20px; /* Außenabstand auf allen vier Seiten */
}

9.3 Die zwei Modi des Box-Modells: Standard vs. Quirks ​

CSS hat 2 verschiedene Modi, wie die Gesamtbreite eines Elements berechnet wird. Dies ist eine häufige Fehlerquelle!

1. Standard-Box-Modell (Content-Box) - Standard ​

Die width und height beziehen sich nur auf den Inhalt (Content).

Berechnung:

Gesamtbreite = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Beispiel:

css
.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #3366cc;
    margin: 20px;
    
    /* Gesamtbreite = 300 + 20 + 20 + 2 + 2 + 20 + 20 = 384px */
}

2. Quirks-Box-Modell (Border-Box) - Empfohlen! ​

Die width und height beziehen sich auf den gesamten Bereich inclusive Padding und Border.

Aktivierung:

css
.box {
    box-sizing: border-box;
}

Berechnung:

Gesamtbreite = width (bereits inklusive padding und border) + margin-links + margin-rechts

Beispiel:

css
.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid #3366cc;
    margin: 20px;
    
    /* Gesamtbreite = 300 + 20 + 20 = 340px */
    /* Die 300px beinhalten bereits padding und border! */
}

💡 Welches Modell sollten Sie verwenden? ​

Empfehlung: box-sizing: border-box;

Warum?

  • ✅ Intuitiver: Wenn Sie width: 300px; festlegen, ist das Element tatsächlich 300px breit!
  • ✅ Einfacher zu berechnen
  • ✅ Vermeidet unerwartete Überläufe

Universelle Anwendung (CSS Reset):

css
* {
    box-sizing: border-box;
}

9.4 Außenabstand-Zusammenfallen (Margin Collapsing) ​

Ein häufiges Problem bei Anfängern: Vertikale Außenabstände fallen manchmal zusammen!

❌ Das Problem ​

Wenn zwei aufeinanderfolgende Elemente jeweils einen Außenabstand haben, werden diese nicht addiert, sondern der größere gewinnt!

Beispiel:

css
.box1 {
    margin-bottom: 30px;
}

.box2 {
    margin-top: 20px;
}

Erwartet: 30px + 20px = 50px Abstand zwischen den Elementen Tatsächlich: 30px Abstand (der größere Wert zählt!)

✅ Lösungen ​

  1. Nur eine Richtung verwenden: Verwenden Sie entweder margin-bottom oder margin-top, nicht beide.

    css
    .box1 {
    margin-bottom: 30px; /* Nur unten */
}

.box2 {
    /* margin-top entfernen */
}

  2. Flexbox oder Grid verwenden: Diese Layout-Methoden ignorieren Margin-Collapsing.

    css
    .container {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den Elementen */
}

  3. Padding statt Margin verwenden: Polsterung (Padding) fällt nicht zusammen.

    css
    .container {
    padding: 20px 0;
}

9.5 Praxis: Karten und Buttons mit Box-Modell gestalten ​

Lassen Sie uns das Gelernte in einem praktischen Beispiel anwenden!

🎯 Beispiel 1: Karte mit Box-Modell ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box-Modell Praxis</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
            <h3>Karte 1</h3>
            <p>Dies ist eine Karte mit Box-Modell.</p>
        </div>
        
        <div class="card">
            <h3>Karte 2</h3>
            <p>Noch eine Karte mit Box-Modell.</p>
        </div>
    </div>
</body>
</html>

CSS (style.css):

css
/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* WICHTIG: Border-Box verwenden! */
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background-color: #f0f0f0;
}

/* ===== Karten-Container ===== */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Einzelne Karte ===== */
.card {
    /* Breite festlegen (bereits inklusive padding und border wegen border-box) */
    width: 300px;
    
    /* Innenabstand (Polsterung) */
    padding: 30px;
    
    /* Rahmen */
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    
    /* Außenabstand (Margin) - hier nicht nötig wegen gap im Container */
    /* margin: 20px; */
    
    /* Hintergrundfarbe */
    background-color: #ffffff;
    
    /* Schatten */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    /* Übergang für Hover-Effekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt für Karten */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Titel der Karte */
.card h3 {
    color: #333333;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Text der Karte */
.card p {
    color: #666666;
    line-height: 1.6;
}

🔍 Erklärung des Codes:

  1. box-sizing: border-box;: Stellt sicher, dass width: 300px; die gesamte Breite inklusive Padding und Border ist!
  2. padding: 30px;: Innenabstand von 30px auf allen Seiten
  3. border: 2px solid #e0e0e0;: 2px dicker, durchgehender, grauer Rahmen
  4. border-radius: 12px;: Abgerundete Ecken
  5. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);: Sanfter Schatten
  6. transition: transform 0.3s ease, box-shadow 0.3s ease;: Sanfter Übergang für Hover-Effekte

🎯 Beispiel 2: Button mit Box-Modell ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button mit Box-Modell</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="btn btn-primary">Primärer Button</button>
    <button class="btn btn-secondary">Sekundärer Button</button>
</body>
</html>

CSS (style.css):

css
/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    text-align: center;
}

/* ===== Button-Grundstile ===== */
.btn {
    /* Innenabstand (Polsterung) */
    padding: 12px 24px; /* 12px oben/unten, 24px links/rechts */
    
    /* Rahmen */
    border: none;
    border-radius: 8px;
    
    /* Schrift */
    font-size: 16px;
    font-weight: bold;
    
    /* Cursor */
    cursor: pointer;
    
    /* Übergang */
    transition: all 0.3s ease;
    
    /* Außenabstand */
    margin: 10px;
}

/* Primärer Button */
.btn-primary {
    background-color: #3366cc;
    color: white;
}

.btn-primary:hover {
    background-color: #2a55a8;
    box-shadow: 0 4px 8px rgba(51, 102, 204, 0.3);
}

/* Sekundärer Button */
.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

🔍 Erklärung des Codes:

  1. padding: 12px 24px;: Innenabstand (oben/unten: 12px, links/rechts: 24px)
  2. border: none;: Kein Rahmen
  3. border-radius: 8px;: Leicht abgerundete Ecken
  4. cursor: pointer;: Zeigercursor beim Darüberfahren
  5. margin: 10px;: Außenabstand zu anderen Elementen

📝 Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  • ✅ Das Box-Modell besteht aus 4 Schichten: Content, Padding, Border, Margin
  • ✅ Wie man padding und margin festlegt
  • ✅ Den Unterschied zwischen content-box und border-box
  • ✅ Dass box-sizing: border-box; empfohlen wird
  • ✅ Dass vertikale Margins zusammenfallen können (Margin Collapsing)
  • ✅ Wie man Karten und Buttons mit dem Box-Modell gestaltet

🎯 Nächste Schritte ​

Im nächsten Kapitel werden wir:

  1. Anzeigemodi (Display) erlernen (block, inline, inline-block)
  2. Wann welchen Modus verwenden
  3. Praktische Projekte zur Elementanordnung erstellen

Bereit für mehr? Los geht's! 🎨

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials