Summary  
This chapter explains the CSS box model concept, detailing how content, padding, border, and margin layers combine to determine an element’s total dimensions and spacing.

General domain of usage  
Web page layout and design

Watch this video to see how the box model works in real web layouts. You'll learn how content, padding, border, and margin interact, and how changing these values affects the size and spacing of elements in general. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

HTML-Elemente werden als rechteckige Boxen auf einer Webseite dargestellt. Jedes Element besitzt einen Inhaltsbereich, Innenabstand (Padding), Rahmen (Border) und Außenabstand (Margin).

## Die vier Bestandteile des Box-Modells


### Inhalt
Der Inhaltsbereich enthält Text, Bilder oder andere Elemente.
Dies ist der sichtbare innere Teil des Elements.


### Padding
Padding ist der Abstand zwischen dem Inhalt und dem Rand.
Es erzeugt einen inneren Abstand.
```css
.box {
  padding: 20px;
}
```
Padding vergrößert die sichtbare Größe des Elements.


### Border
Der Rand umgibt das Padding und den Inhalt.
```css
.box {
  border: 4px solid darkblue;
}
```
Standardmäßig beträgt die Randbreite 0 und die Randfarbe entspricht der Textfarbe, sofern nicht anders angegeben.


### Margin
Margin ist der Abstand außerhalb des Randes.
Es schafft Abstand zwischen den Elementen.
```css
.box {
  margin: 40px;
}
```
Margin beeinflusst nicht die Hintergrundfarbe des Elements.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJwYWdlIj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4KICAgICAgICA8cCBjbGFzcz0icXVvdGUiPgogICAgICAgICAgIktub3dpbmcgeW91cnNlbGYgaXMgdGhlIGJlZ2lubmluZyBvZiBhbGwgd2lzZG9tLiIgLSBBcmlzdG90bGUKICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwouYm94IHsKICBtYXJnaW46IDQwcHg7IC8qIFNwYWNlIG91dHNpZGUgdGhlIGVsZW1lbnQgKi8KICBib3JkZXI6IDRweCBzb2xpZCBkYXJrYmx1ZTsgLyogVmlzaWJsZSBlZGdlICovCiAgcGFkZGluZzogMjBweDsgLyogU3BhY2UgaW5zaWRlIHRoZSBlbGVtZW50ICovCiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7IC8qIFNob3dzIHRoZSBwYWRkZWQgYXJlYSAqLwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKICBtYXJnaW46IDA7Cn0KCi5wYWdlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CiAgcGFkZGluZzogMTBweDsKfQoKLnF1b3RlIHsKICBmb250LXNpemU6IDE4cHg7CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBjb2xvcjogIzMzMzsKICBtYXJnaW46IDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9

In diesem Beispiel:
- Der Hintergrund füllt den Inhalts- und den Innenabstandsbereich aus;
- Der Rahmen umgibt diese Bereiche;
- Der Außenabstand schafft Platz außerhalb des Kastens.

Standardmäßig besitzen einige Elemente vordefinierte `padding`- und `margin`-Eigenschaften. Dies wurde eingeführt, um sicherzustellen, dass eine Webseite auch ohne zusätzliche Styles lesbar bleibt.

Hinweis

Das Box-Modell bestimmt, wie viel Platz ein Element auf einer Seite einnimmt.

Die Gesamtgröße eines Elements hängt von der Inhaltsgröße, dem Innenabstand (Padding), dem Rahmen (Border) und dem Außenabstand (Margin) ab.

Wichtig

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

Verstehen, wie CSS mit HTML verbunden wird und wie Stile durch Selektoren angewendet werden. Farben, Textgestaltung und Hover-Effekte zur Steuerung der visuellen Darstellung anwenden.

Verbesserung der Typografie durch Zeilenhöhe, Abstände, Schriftarteigenschaften und benutzerdefinierte Schriftarten. Steuerung von Schriftfamilien, -gewicht, -stil und -größe für eine bessere Lesbarkeit.

Steuerung der Layoutstruktur mit Margin-, Padding-, Border- und Width-Eigenschaften. Verständnis des Box-Sizing-Verhaltens und der Anzeigearten von Elementen wie Block, Inline und Inline-Block.

Steuerung von horizontalen und vertikalen Layouts mit Flexbox-Eigenschaften. Anpassung von Richtung, Ausrichtung und Abstand zur Strukturierung von UI-Komponenten.

Layouts mit Hintergrundfarben, Bildern, Pseudoelementen und Schatten aufwerten. Visuelle Komponenten für Tiefe und Kontrast gestalten.

Das Box-Modell Praxisnah Verstehen

Die vier Bestandteile des Box-Modells

Inhalt

Padding

Border

Margin