## Das Box-Model

Aus CSS-Perspektive ist jedes (HTML)-Element eine Box. Es gibt verschiedene Box-Modelle die sich am Ende jeweils in 2 Kategorien eingliedern lassen:
Die `block-box` und die `inline-box`.

Eine Block-Box ist dadurch gekennzeichnet, dass sie die volle Verfügbare Breite auf dem Viewport einnimmt. Beispiele hierfür sind:

- div
- p
- h1-h6
- und weitere...

Inline-Boxen verhalten sich "gegensätzlich". Inline-Boxen nehmen nur den Platz ein, den der Inhalt braucht. Beispiele sind:

- span
- strong / b
- em / i
- und weitere...

Mittels CSS kann man das (Standard)-Verhalten ändern. Mehr dazu in kürze.

Eine Box in CSS besteht aus mehreren Teilen, die ineinander verschachtelt sind.

Wir haben auch bereits alle Teile kennen gelernt:

Margin
Border
Padding
Inhalt!

Im Standard-Box-Model, nimmt eine Box die Summe aus margin + border + padding + content-size ein.

content-size ist die Breite und Höhe, die der eigentliche Inhalt einnimmt.

Es gibt ein alternatives Model, dieses rechnet padding und border zu einer Angegebenen Breite / Höhe mit ein.