Was ist das Box-Modell in CSS?

Das CSS-Box-Modell beschreibt, wie der Raum berechnet wird, den ein Element auf einer Webseite einnimmt. Es umfasst:

• Inhalt: Der Bereich für den tatsächlichen Inhalt des Elements (Text, Bilder).
• Padding (Innenabstand): Der Raum zwischen Inhalt und Rand des Elements.
• Rand: Der Rahmen, der padding und Inhalt umgibt.
• Margin (Außenabstand): Der Raum um den Rand des Elements, der es von anderen Elementen trennt.

Die Standardgröße eines Elements (im Standardmodell box-sizing: content-box) wird durch die Summe der Größen von Inhalt, padding und border bestimmt. Margin wird zum Gesamtplatz hinzugefügt, beeinflusst aber nicht die Größe des Elements selbst.

Die Eigenschaft box-sizing: border-box ändert die Berechnung der Elementgröße, indem padding und border in die Gesamtbreite und -höhe einbezogen werden. In diesem Fall wird die Größe des Elements durch width/height bestimmt, und padding sowie border "verbrauchen" Platz im Inhalt.

/* Standardmodell (standardmäßig) */
.element-content-box {
  width: 100px; /* Inhaltgröße */
  padding: 10px;
  border: 5px solid black;
  /* Gesamte Breite: 100px (Inhalt) + 10px (padding links) + 10px (padding rechts) + 5px (Rand links) + 5px (Rand rechts) = 130px */
}

/* Border-box-Modell */
.element-border-box {
  width: 100px; /* Gesamte Breite: Inhalt + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Inhaltgröße: 100px - 10px (padding links) - 10px (padding rechts) - 5px (Rand links) - 5px (Rand rechts) = 70px */
}

Das Verständnis des Box-Modells ist entscheidend für die präzise Positionierung und Anordnung von Elementen auf der Seite.