Kurs HTML

Wprowadzenie: Jak obliczany jest rozmiar pudełka?

W poprzednich lekcjach dowiedzieliśmy się, że domyślnie właściwości width i height w CSS określają rozmiar tylko **obszaru treści (content area)** elementu. Padding i border są dodawane *na zewnątrz* tych wymiarów, co zwiększa całkowity rozmiar elementu na stronie.

To domyślne zachowanie (box-sizing: content-box;) może być nieintuicyjne, zwłaszcza gdy chcemy, aby element miał dokładnie określoną szerokość całkowitą, wliczając w to padding i border.

Właściwość box-sizing pozwala zmienić sposób, w jaki przeglądarka oblicza całkowitą szerokość i wysokość elementu.

Wartości dla box-sizing

Właściwość box-sizing przyjmuje dwie główne wartości:

• content-box: Jest to **wartość domyślna**. width i height odnoszą się tylko do obszaru treści. Padding i border są dodawane na zewnątrz.

  Całkowita Szerokość = width + padding-left + padding-right + border-left-width + border-right-width

• border-box: width i height określają całkowity rozmiar elementu, **włączając padding i border**. Obszar treści jest automatycznie zmniejszany, aby zmieścić padding i border wewnątrz zadanych wymiarów width i height.

  Całkowita Szerokość = width (gdzie width obejmuje już padding i border)

Przykład porównawczy:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid blue;
  margin: 10px;
}

.content-box-example {
  box-sizing: content-box; /* Domyślne */
  background-color: lightyellow;
}

.border-box-example {
  box-sizing: border-box;
  background-color: lightcyan;
}Kopiuj

Obliczenia:

• .content-box-example (domyślnie):
  • Całkowita szerokość = 200px (width) + 20px (p-left) + 20px (p-right) + 5px (b-left) + 5px (b-right) = 250px
  • Całkowita wysokość = 100px (height) + 20px (p-top) + 20px (p-bottom) + 5px (b-top) + 5px (b-bottom) = 150px
• .border-box-example:
  • Całkowita szerokość = 200px (zgodnie z width)
  • Całkowita wysokość = 100px (zgodnie z height)
  • Obszar treści zostanie automatycznie zmniejszony:
  • Szerokość treści = 200px - 20px (p-left) - 20px (p-right) - 5px (b-left) - 5px (b-right) = 150px
  • Wysokość treści = 100px - 20px (p-top) - 20px (p-bottom) - 5px (b-top) - 5px (b-bottom) = 50px

Jak widać, border-box sprawia, że element zachowuje zadaną szerokość width i wysokość height, niezależnie od dodanego paddingu czy obramowania, co jest często bardziej przewidywalne i łatwiejsze w zarządzaniu layoutem.

Dlaczego border-box jest tak popularny?

Model border-box jest powszechnie uważany za bardziej intuicyjny dla projektantów i deweloperów, ponieważ:

• Łatwiejsze zarządzanie wymiarami: Ustawiając width: 50%; i dodając padding, element nadal zajmie dokładnie 50% szerokości rodzica, a nie więcej.
• Prostsze tworzenie siatek (grids): Ułatwia tworzenie kolumn o stałej procentowej szerokości, które mają również padding lub border.
• Bardziej przewidywalne layouty: Zmiana paddingu lub obramowania nie "rozpycha" elementu i nie psuje układu sąsiednich elementów.

Z tych powodów, bardzo popularną praktyką w nowoczesnym web developmencie jest ustawienie box-sizing: border-box; dla wszystkich elementów na stronie za pomocą globalnej reguły:

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit; /* Wszystkie elementy dziedziczą box-sizing z html */
}Kopiuj

Ta konfiguracja sprawia, że border-box staje się domyślnym modelem obliczania rozmiaru dla całej strony, co znacznie upraszcza pracę z layoutem.

Dziedziczenie box-sizing

Właściwość box-sizing **nie jest dziedziczona** domyślnie. Oznacza to, że ustawienie jej na rodzicu nie wpływa na dzieci. Dlatego w powyższym przykładzie globalnego ustawienia używa się selektora uniwersalnego (*) wraz z box-sizing: inherit;, aby jawnie wymusić dziedziczenie tej właściwości z elementu html na wszystkie elementy i pseudoelementy.