Was ist der Unterschied zwischen box-sizing: content-box und border-box?

Der Unterschied zwischen box-sizing: content-box und box-sizing: border-box liegt darin, wie der Browser die Gesamtabmessungen des Elements berechnet:

• content-box (Standardwert): Breite und Höhe geben nur den Inhalt an. Zu diesen Maßen werden Innenabstände (padding) und Rahmen (border) hinzugefügt, was die endgültige Größe des Elements erhöht.

• border-box: Breite und Höhe umfassen den Inhalt, das padding und den Rahmen. Das heißt, padding und border "passen" innerhalb der festgelegten Maße.

Beispiel:

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

• Bei content-box beträgt die Gesamtabmessung: 200 + 102 + 52 = 230px.
• Bei border-box bleibt die Gesamtabmessung 200px, und der Inhalt wird verkleinert, um padding und border unterzubringen.

Die Verwendung von border-box ist oft praktischer für das Layout, da die Elementgrößen nicht "aufgebläht" werden durch padding und border.