Was ist die Eigenschaft box-sizing: border-box und welche Rolle spielt sie in CSS?

Die Eigenschaft box-sizing bestimmt, wie die gesamte Breite und Höhe eines Elements berechnet werden.

box-sizing: content-box (Standardwert) — die Breite und Höhe beziehen sich nur auf den Inhalt (content). Padding und border werden zu den angegebenen Werten addiert.

box-sizing: border-box — die Breite und Höhe beinhalten padding und border. Der content-Bereich wird verkleinert, um innerhalb der angegebenen Maße zu passen.

Die Rolle von box-sizing: border-box in CSS:

• Erleichterung der Berechnungen: Vereinfacht die Berechnung der Elementgrößen, insbesondere bei Verwendung von padding und border.
• Vorhersehbarkeit im Layout: Ermöglicht es, die Blockgrößen genau festzulegen, unabhängig von padding und border, was das Layout vorhersehbarer macht.
• Bequemlichkeit im Box-Modell: Entspricht dem intuitiven Verständnis der Blockgröße — seiner Rahmen. Erleichtert die Erstellung von Raster und festen Komponenten.

Beispiel:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Gesamte Breite = 100 + 10*2 + 1*2 = 122px */
  /* Gesamte Höhe = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Gesamte Breite = 100px */
  /* Gesamte Höhe = 100px */
  /* Der Inhalt wird 100 - 10*2 - 1*2 = 78px breit und hoch sein */
}