Pri oblikovanju spletnih strani je zelo pomembna natančna navedba velikosti predmetov. Če izračun ne uspe, se lahko celotna postavitev "zlomi" in poškoduje videz mesta. Da bi se izognili napakam, je pomembno, da natančno razumete, kako brskalniki izračunavajo metriko blokov in kako ta algoritem upravljajo z lastnostmi za razvrščanje v polje CSS.

CSS blokovnega vzorca

Vsa vozlišča dokumenta, ki imajo blok vrste prikaza, so opisana z blokovnim modelom. Po njenem mnenju so v strukturi elementa sestavljene naslednje veje ali škatle:

vsebinski okvir, ki vključuje vsebino samega bloka - besedilna in otroška vozlišča;

polnilna škatla, ki zavzema celoten prostor znotraj okvira z notranjimi vdolbinami ali oblazinjenjem;

Obmejna omarica vključuje tudi mejo.

Poleg tega je za blok mogoče določiti zunanje alineje ali robove, ki jih ločujejo od sosednjih elementov ali med starši. Vsa navedena polja so lahko odsotna ali prazna. To je osnovni koncept CSS, brez katerega je skoraj nemogoče ustvariti lepe kompleksne postavitve.

Določanje dejanske velikosti elementa

Glavna stvar za brskalnik je vsebinski boks, saj je to semantični del katerega koli bloka. Zato, ko namestitveni program določi metrike z lastnostmi širine in višine, veljajo natančno za vsebino. Nadalje, notranje in zunanje razmake in širina okvirja se dodajo določenim notranjim dimenzijam.

.block {
širina: 200px;
višina: 100px;
oblazinjenje: 20px;
padding-bottom: 20px;
padding-left: 10px;
oblazinjenje desno: 10px;
meja: 5px trdna;
}

Kljub dejstvu, da je blok element nastavljen na širino 200 slikovnih pik, bo dejansko zasedel 230 točk na strani, ob upoštevanju okvirja in oblazinjenja ob strani. Podobno se izračuna višina: namesto pričakovanih 100 slikovnih pik bo enota trajala do 150 navpično.