Was ist das Box-Modell, woraus besteht es und welche…

Das Box-Modell (CSS-Box-Modell) ist eine abstrakte Entität, die beschreibt, wie HTML-Elemente auf der Seite als rechteckige Blöcke dargestellt werden. Es legt die Größe und Anordnung des Inhalts, der inneren Abstände, der Rahmen und der äußeren Abstände des Elements fest.

Das Box-Modell besteht aus den folgenden Teilen:

Inhalt: Der Inhalt des Elements (Text, Bilder usw.). Seine Größe wird durch die Eigenschaften width und height bestimmt.
Padding: Der Raum zwischen dem Inhalt des Elements und seinem Rand. Wird durch die Eigenschaften padding-top, padding-right, padding-bottom, padding-left oder die Kurzform padding definiert.
Rand (Border): Der Rahmen um das innere Padding und den Inhalt. Wird durch die Eigenschaften border-width, border-style, border-color oder die Kurzform border definiert.
Außenabstand (Margin): Der Raum zwischen dem Rand des Elements und externen Elementen. Wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left oder die Kurzform margin definiert.

Es gibt zwei Hauptarten des Box-Modells, die durch die Eigenschaft box-sizing bestimmt werden:

content-box (Standardwert): Die Breite und Höhe des Elements, festgelegt durch width und height, beziehen sich nur auf den Inhaltsbereich. Padding und Border werden zu diesen Größen addiert, was die Gesamtgröße des Elements erhöht.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Fügt 20px zur Gesamtgröße in jeder Achse hinzu */
  border: 2px solid black; /* Fügt 4px zur Gesamtgröße in jeder Achse hinzu */
  box-sizing: content-box; /* Standardverhalten */
}
/* Die Gesamtgröße des Elements beträgt 124px mal 124px */

border-box: Die Breite und Höhe des Elements, festgelegt durch width und height, beinhalten den Inhalt, das Padding und den Border. Padding und Border vergrößern die Gesamtgröße nicht, sondern "komprimieren" den Inhaltsbereich.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Wird in die Gesamtbreite/-höhe eingeschlossen */
  border: 2px solid black; /* Wird in die Gesamtbreite/-höhe eingeschlossen */
  box-sizing: border-box;
}
/* Die Gesamtgröße des Elements beträgt 100px mal 100px */

border-box wird häufiger verwendet, um ein vorhersehbareres Verhalten bei der Größenbestimmung zu erzielen, wenn Padding und Border hinzugefügt werden. Dies ist z.B. bei der Erstellung responsiver Layouts nützlich, bei denen Elemente eine bestimmte prozentuale Breite einnehmen sollen.

Was ist das Box-Modell, woraus besteht es und welche Arten gibt es?