При проектирането на уеб страници е много важно точната индикация за размера на елементите. Ако изчислението е неуспешно, цялото оформление може да се „счупи“, което ще навреди на външния вид на сайта. За да се избегнат грешки, важно е да се разбере точно как браузърите изчисляват метриките на блоковете и как да управляват този алгоритъм, като използват свойството за оразмеряване на CSS.
CSS блок модел
Всички възли на документ, имащ блок тип на дисплея, са описани с блоков модел. Според нея, в структурата на елемента, следните клонове или кутии са поставени заедно:
съдържание-кутия, която включва съдържанието на самия блок - текстови и детски възли;
подложка-кутия, която заема цялото пространство в рамката с вътрешни вдлъбнатини или подложки;
Гранична кутия включва и самата граница.
Освен това, за блока е възможно да се определят външни отстъпи или полета, като се отделят от съседни елементи или между родители. Всяко от изброените полета може да липсва или да е празно.
Това е основната концепция на CSS, без която е почти невъзможно да се създадат красиви сложни оформления.
Определяне на действителния размер на елемента
Основното за браузъра е съдържание-бокс, тъй като това е семантичната част на всеки блок. Следователно, когато инсталационната програма определя метриките, използвайки свойствата за ширина и височина, те се прилагат точно към съдържанието. Освен това, вътрешните и външните отстъпи и ширината на рамката се добавят към някои вътрешни размери на кутията.
Въпреки факта, че блоковият елемент е с ширина 200 пиксела, той действително ще заема 230 пиксела на страницата, като се вземат предвид рамката и страничната подложка. Аналогично, изчислението на височината се извършва: вместо очакваните 100 пиксела, устройството ще отнеме до 150 вертикално.
