Podczas projektowania stron internetowych bardzo ważne jest dokładne wskazanie rozmiaru elementów. Jeśli obliczenia nie powiedzie się, cały układ może "zepsuć się", powodując uszkodzenie wyglądu witryny. Aby uniknąć błędów, ważne jest dokładne zrozumienie sposobu, w jaki przeglądarki obliczają dane bloków i jak zarządzać tym algorytmem za pomocą właściwości box-sizing CSS.
Wzór bloku CSS
Wszystkie węzły dokumentu posiadające blokowy typ wyświetlania są opisane za pomocą modelu blokowego. Według niej, w strukturze elementu zestawione są następujące gałęzie lub pola:
treść-pole, które zawiera treść samego bloku - tekst i węzły potomne;
padding-box, który zajmuje całą przestrzeń w ramie z wewnętrznymi wcięciami lub wyściółką;
border-box, obejmuje również samą granicę.
Dodatkowo, dla bloku można określić wcięcia zewnętrzne lub marginesy, oddzielając je od sąsiednich elementów lub między rodzicami. Każde z wymienionych pól może być nieobecne lub puste.
Jest to podstawowa koncepcja CSS, bez której prawie niemożliwe jest tworzenie pięknych złożonych układów.
Określanie faktycznego rozmiaru elementu
Najważniejszą rzeczą dla przeglądarki jest content-boxing, ponieważ jest to semantyczna część dowolnego bloku. Dlatego, gdy instalator określa dane za pomocą właściwości width i height, odnoszą się one dokładnie do treści. Ponadto, wewnętrzne i zewnętrzne wcięcia i szerokość ramki są dodawane do pewnych wewnętrznych wymiarów pudełka.
Pomimo faktu, że element blokowy jest ustawiony na szerokość 200 pikseli, w rzeczywistości zajmie on 230 pikseli na stronie, biorąc pod uwagę klatkę i dopełnienie boczne. Podobnie, wykonywane jest obliczenie wysokości: zamiast oczekiwanych 100 pikseli, jednostka zajmie do 150 w pionie.