Was ist das Box-Modell in CSS?

Das CSS-Box-Modell beschreibt, wie Elemente auf der Seite als rechteckige Blöcke dargestellt werden. Es besteht aus vier Zonen oder Schichten, die übereinander liegen, beginnend mit dem Inhalt:

1. Inhalt: Der Bereich, in dem sich der eigentliche Inhalt des Elements befindet (Text, Bilder usw.). Seine Größe wird durch die Eigenschaften width und height bestimmt.

2. Padding (Innenabstand): Der transparente Bereich zwischen dem Inhalt und dem Rand des Elements. Er wird durch die Eigenschaften padding-top, padding-right, padding-bottom, padding-left oder die Abkürzung padding festgelegt.

3. Rand (Border): Die Linie, die das Padding und den Inhalt umgibt. Ihr Stil, ihre Dicke und Farbe werden durch die Eigenschaften border-width, border-style, border-color oder Abkürzungen wie border festgelegt.

4. Außenabstand (Margin): Der transparente Bereich um den Rand des Elements, der es von anderen Elementen trennt. Er wird durch die Eigenschaften margin-top, margin-right, margin-bottom, margin-left oder die Abkürzung margin festgelegt. Die Margen benachbarter Blöcke können zusammenfallen.

Das Standardverhalten, das durch box-sizing: content-box (Standard) beschrieben wird, legt fest, dass die Eigenschaften width und height nur den Inhalt (Content) betreffen. Padding und Border werden zu dieser Größe addiert, was die Gesamtgröße des Elements erhöht.

Bei Verwendung von box-sizing: border-box umfassen die Eigenschaften width und height den Inhalt, das Padding und die Border. Der Margin wird immer zur Gesamtgröße des Elements addiert, unabhängig von box-sizing.

Beispiel:

div {
  width: 100px; /* Breite des Inhalts (bei content-box) oder des gesamten Elements (bei border-box) */
  height: 50px; /* Höhe des Inhalts (bei content-box) oder des gesamten Elements (bei border-box) */
  padding: 10px; /* Innenabstand */
  border: 2px solid black; /* Border */
  margin: 15px; /* Außenabstand */
}

Je nach Wert von box-sizing sind die tatsächlichen Größen des Elements unterschiedlich.

• box-sizing: content-box: Die tatsächliche Breite = 100px (Inhalt) + 10px (Padding links) + 10px (Padding rechts) + 2px (Border links) + 2px (Border rechts) = 124px. Die tatsächliche Höhe = 50px (Inhalt) + 10px (Padding oben) + 10px (Padding unten) + 2px (Border oben) + 2px (Border unten) = 74px.
• box-sizing: border-box: Die tatsächliche Breite = 100px (Inhalt + Padding + Border). Die tatsächliche Höhe = 50px (Inhalt + Padding + Border).

Der äußere Margin margin: 15px wird um diese Gesamtgröße herum hinzugefügt.