Jak właściwość box-sizing wpływa na rozmiar elementu?

Właściwość CSS box-sizing określa, jak obliczane są rozmiary elementu — czy w szerokość i wysokość wliczane są marginesy wewnętrzne (padding) i obramowania (border), czy nie.

• Wartość content-box (domyślna): szerokość i wysokość elementu określają tylko zawartość. Marginesy wewnętrzne i obramowania są dodawane do tych rozmiarów, zwiększając końcowy rozmiar elementu.

• Wartość border-box: szerokość i wysokość obejmują zawartość, marginesy wewnętrzne i obramowania. Oznacza to, że jeśli ustawisz szerokość 100px, zawartość zostanie zmniejszona z uwzględnieniem paddingu i borderu, tak aby końcowy rozmiar pozostał 100px.

Przykład:

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

W tym przypadku element .box będzie miał łączną szerokość 200px, w tym padding i border. Gdyby było to content-box, to łączna szerokość wyniosłaby 200 + 210 + 25 = 230px.

Użycie border-box często upraszcza układ, ponieważ rozmiary elementów nie "rozsypują się" z powodu paddingu i borderu.