Własność CSS box-sizing

Własność CSS box-sizing określa sposób obliczania wymiarów elementów HTML przez wybór modelu polowego CSS. Jej ustawienie ma wpływ na sposób interpretacji wszystkich własności związanych z definiowaniem rozmiaru, takich jak width, height czy flex-basis.

W uproszczeniu można powiedzieć, że własność box-sizing służy do wybierania modelu polowego CSS.

Domyślnie wszystkie elementy HTML podlegają zasadom tzw. standardowego modelu polowego. W modelu tym wartości obramowania i dopełnienia (jeśli są zdefiniowane) są dodawane do szerokości i wysokości elementu zdefiniowanych za pomocą własności width i height (albo pokrewnych), czyli je zwiększają. Na przykład:

article {
  width: 300px;
  height: 600px;
  padding: 10px;
  border: 5px solid black;
}

Ten element article, mimo że ma ustawione szerokość na 300 pikseli i wysokość na 600 pikseli, w rzeczywistości na stronie będzie zajmował 330 pikseli w poziomie i 630 pikseli w pionie, ponieważ wartości obramowania i dopełnienia (odpowiednio po 5 i 10 pikseli z każdej strony) zostaną dodane do wartości własności width i height, które w tym przypadku odnoszą się tylko do obszaru treści elementu (który będzie miał szerokość 300 pikseli i wysokość 600 pikseli). Takie są podstawowe zasady standardowego modelu polowego.

Jeśli natomiast ktoś woli, aby ustawienia własności rozmiarów (m.in. width i height) obejmowały także szerokość dopełnienia i obramowania, to może przełączyć element na tzw. alternatywny model polowy. W efekcie element zawsze będzie miał taką samą szerokość, ustawioną np. przez własności width i height, a ewentualne obramowanie i dopełnienie będą powodowały zmniejszenie obszaru treści elementu. Spójrz na poniższy przykład:

article {
  box-sizing: border-box;
  width: 300px;
  height: 600px;
  padding: 10px;
  border: 5px solid black;
}

Deklaracja CSS box-sizing: border-box; w tej regule CSS włącza tryb alternatywnego modelu polowego, w efekcie czego jego ostateczna szerokość wyniesie 300 pikseli, a wysokość – 600 pikseli. Natomiast obszar treści będzie odpowiednio zmniejszony i jego szerokość wyniesie 270 pikseli (300 – 10 – 10 – 5 – 5), a wysokość – 570 pikseli (600 – 10 – 10 – 5 – 5).

Wartości i składnia

Własność box-sizing jako wartość przyjmuje jedno z dwóch słów kluczowych:

Przykład

Poniżej są zdefiniowane dwa elementy div o identycznych ustawieniach własności width i height, dopełnienia oraz obramowania. Różnią się jedynie modelem polowym – pierwszy ma ustawiony standardowy model polowy, a drugi – alternatywny model polowy.

<style>
div {
  border: 10px dashed darkgreen;
  padding: 20px;
  width: 200px;
  height: 100px;
}
#content-box {
  box-sizing: content-box;
}
#border-box {
  box-sizing: border-box;
}
</style>
<div id="content-box">content-box</div>
<p></p>
<div id="border-box">border-box</div>

Efekt:

Mimo takich samych ustawień szerokości i wysokości oba elementy div znacznie różnią się wielkością.

Szerokość pierwszego z nich (content-box) wynosi 200 + 20 + 20 + 10 + 10 = 260 pikseli, a jego wysokość wynosi 100 + 20 + 20 + 10 + 10 = 160 pikseli, ponieważ własności width i height określiły tylko szerokość i wysokość obszaru treści, do którego następnie zostały dodane dopełnienie i obramowanie z dwóch stron w każdym wymiarze.

Natomiast wymiary drugiego (border-box) kontenera to 200 pikseli szerokości i 100 pikseli wysokości, ponieważ w tym przypadku własności width i height określają rozmiar całego elementu już po uwzględnieniu dopełnienia i obramowania. W efekcie zmniejszył się rozmiar obszaru treści.

Zastosowanie

Własność box-sizing ma zastosowanie do wszystkich elementów HTML, które obsługują własności width i height.

Podsumowanie