Czym jest właściwość box-sizing: border-box i jaką rolę odgrywa w CSS?

Właściwość box-sizing określa, jak obliczana jest całkowita szerokość i wysokość elementu.

box-sizing: content-box (domyślna wartość) — szerokość i wysokość odnoszą się tylko do zawartości (content). Padding i border są dodawane do podanych wartości szerokości/wysokości.

box-sizing: border-box — szerokość i wysokość obejmują padding i border. content jest kurczony, aby zmieścić się w podanych wymiarach.

Rola box-sizing: border-box w CSS:

• Uproszczenie obliczeń: Ułatwia obliczanie rozmiarów elementów, szczególnie przy użyciu padding i border.
• Przewidywalność układu: Pozwala dokładnie ustalić rozmiary bloków, niezależnie od padding i border, co czyni układ bardziej przewidywalnym.
• Wygoda w modelu pudełkowym: Zgadza się z intuicyjnym rozumieniem rozmiaru bloku — jego ram. Ułatwia tworzenie siatek i komponentów o stałym rozmiarze.

Przykład:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Całkowita szerokość = 100 + 10*2 + 1*2 = 122px */
  /* Całkowita wysokość = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Całkowita szerokość = 100px */
  /* Całkowita wysokość = 100px */
  /* Zawartość będzie miała szerokość i wysokość 100 - 10*2 - 1*2 = 78px */
}