Wie beeinflusst die Eigenschaft box-sizing die Größe des Elements?

Die CSS-Eigenschaft box-sizing bestimmt, wie die Größen eines Elements berechnet werden — ob die Innenabstände (padding) und Rahmen (border) einbezogen werden oder nicht.

• Wert content-box (Standard): Die Breite und Höhe des Elements definieren nur den Inhalt. Innenabstände und Rahmen werden zu diesen Maßen addiert, was die endgültige Größe des Elements erhöht.

• Wert border-box: Breite und Höhe beinhalten den Inhalt, die Innenabstände und die Rahmen. Das bedeutet, wenn eine Breite von 100px gesetzt wird, wird der Inhalt unter Berücksichtigung von padding und border verkleinert, damit die Gesamtdimension 100px bleibt.

Beispiel:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

In diesem Fall hat das Element .box eine Gesamtabmessung von 200px, inklusive padding und border. Wäre es content-box, würde die Gesamtabmessung 200 + 210 + 25 = 230px betragen.

Die Verwendung von border-box vereinfacht oft das Layout, da die Größen der Elemente nicht "aus dem Ruder laufen" aufgrund von padding und border.