Box-Modell

Das CSS Box-Modell ist ein fundamentales Konzept, das beschreibt, wie der Browser jedes HTML-Element als eine rechteckige Box darstellt. Diese Box besteht aus mehreren Schichten, die den Inhalt, Abstände, Rahmen und Außenabstände definieren.

Jede Box setzt sich aus vier Hauptkomponenten zusammen:
• Content (Inhalt) – Der eigentliche Inhalt (Text, Bild, etc.)
• Padding (Innenabstand) – Der Abstand zwischen Inhalt und Rahmen
• Border (Rahmen) – Die Linie um Padding und Inhalt
• Margin (Außenabstand) – Der Abstand zwischen Box und anderen Elementen

Aufbau des Box-Modells

.box {
    width: 300px;         /* Breite des Inhalts */
    height: 200px;        /* Höhe des Inhalts */
    padding: 20px;        /* Innenabstand */
    border: 5px solid black; /* Rahmen */
    margin: 30px;         /* Außenabstand */
}

.box {
    width: 300px;         /* Breite des Inhalts */
    height: 200px;        /* Höhe des Inhalts */
    padding: 20px;        /* Innenabstand */
    border: 5px solid black; /* Rahmen */
    margin: 30px;         /* Außenabstand */
}

Content (Inhalt)

• Definiert durch width und height
• Enthält Text, Bilder oder andere HTML-Elemente.

<div class="content-box">Dies ist der Inhalt.</div>

<div class="content-box">Dies ist der Inhalt.</div>

.content-box {
    width: 200px;
    height: 100px;
    background: lightblue;
}

.content-box {
    width: 200px;
    height: 100px;
    background: lightblue;
}

➔ Eine Box mit 200px Breite und 100px Höhe, gefüllt mit lightblue.

Padding (Innenabstand)

• Erzeugt Abstand zwischen Inhalt und Rahmen.
• Wird mit padding definiert (einzeln: padding-top, padding-right, etc.).

Beispiel:

.padded-box {
    padding: 20px; /* 20px auf allen Seiten */
    background: coral;
}

.padded-box {
    padding: 20px; /* 20px auf allen Seiten */
    background: coral;
}

➔ Der Inhalt hat jetzt 20px Abstand zum Rand.

Border (Rahmen)

• Eine sichtbare Linie um Padding und Inhalt.
• Wird mit border gesteuert (border-width, border-style, border-color).

Beispiel:

.bordered-box {
    border: 3px dashed red;
    /* 3px dicke, gestrichelte rote Linie */
}

.bordered-box {
    border: 3px dashed red;
    /* 3px dicke, gestrichelte rote Linie */
}

➔ Eine Box mit rotem, gestricheltem Rahmen.

Margin (Außenabstand)

• Definiert den Abstand zu anderen Elementen.
• Wird mit margin gesetzt (einzeln: margin-top, margin-right, etc.).

Beispiel:

.margin-box {
    margin: 15px; /* 15px Abstand nach außen */
}

.margin-box {
    margin: 15px; /* 15px Abstand nach außen */
}

➔ Die Box hat 15px Abstand zu benachbarten Elementen.

Gesamtberechnung der Box-Größe

Standardmäßig addieren sich width, padding, border und margin zur gesamten Breite/Höhe eines Elements:

Formel:

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

Gesamthöhe = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Beispiel:

.total-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

.total-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

Berechnung:
• Breite: 200px (Inhalt) + 40px (Padding) + 10px (Border) + 20px (Margin) = 270px
• Höhe: 100px + 40px + 10px + 20px = 170px

Box-Sizing: border-box vs. content-box

Standardmäßig (content-box) wird die width/height nur auf den Inhalt bezogen. Mit border-box gehören Padding und Border zur definierten Breite/Höhe.

Beispiel:

.box-content {
    box-sizing: content-box; /* Standard (width = nur Inhalt) */
    width: 200px;
    padding: 20px; /* Gesamtbreite = 200px + 40px = 240px */
}

.box-border {
    box-sizing: border-box; /* width inkl. Padding & Border */
    width: 200px;
    padding: 20px; /* Gesamtbreite = 200px (inkl. 40px Padding) */
}

.box-content {
    box-sizing: content-box; /* Standard (width = nur Inhalt) */
    width: 200px;
    padding: 20px; /* Gesamtbreite = 200px + 40px = 240px */
}

.box-border {
    box-sizing: border-box; /* width inkl. Padding & Border */
    width: 200px;
    padding: 20px; /* Gesamtbreite = 200px (inkl. 40px Padding) */
}

Empfehlung: Viele Entwickler setzen global:

* {
    box-sizing: border-box; /* Vereinfacht die Breitenberechnung */
}

* {
    box-sizing: border-box; /* Vereinfacht die Breitenberechnung */
}

Essenziell

Das Box-Modell ist essenziell für präzises Layouting in CSS. Durch Verständnis von padding, border und margin können Elemente exakt positioniert und gestaltet werden.