Při návrhu webových stránek je velmi důležitá přesná indikace velikosti položek. Pokud výpočet selže, celé uspořádání se může "zlomit", což poškozuje vzhled stránky. Abyste se vyhnuli chybám, je důležité přesně porozumět tomu, jak prohlížeče vypočítají blokové metriky a jak tento algoritmus spravovat pomocí vlastnosti CSS pro dimenzování boxů.

Vzor bloku CSS

Všechny uzly dokumentu s blokovým typem zobrazení jsou popsány blokovým modelem. Podle ní je v struktuře elementu sestavena následující větve nebo krabice:

obsah-box, který obsahuje obsah samotného bloku - textové a podřízené uzly;

polštář, který zabírá celý prostor uvnitř rámu s vnitřními zářezy nebo polstrováním;

ohraničovací rámeček také zahrnuje hranici samotnou.

Navíc pro blok je možné určit vnější zarážky nebo okraje, oddělovat je od sousedních prvků nebo mezi rodiči. Kterákoli z uvedených polí může být nepřítomná nebo prázdná. Toto je základní koncept CSS, bez něhož je téměř nemožné vytvořit krásné složité rozvržení.

Určení skutečné velikosti prvku

Hlavní věcí pro prohlížeč je content-boxing, protože se jedná o sémantickou část libovolného bloku. Proto když instalační program určuje metriky pomocí vlastností šířky a výšky, použijí se přesně na obsah. Dále se do určitých rozměrů vnitřních krabic přidávají vnitřní a vnější zarážky a šířka rámečku.

.block {
šířka: 200px;
výška: 100px;
polstrování: 20px;
polstrování dolů: 20px;
polstrování doleva: 10px;
polstrování doprava: 10px;
okraj: 5px pevný;
}

Navzdory skutečnosti, že daný prvek šířka bloku 200 pixelů, bude ve skutečnosti držet na 230 bodů na základě rámcových a bočních paddynhov. Podobně počítá výšku, namísto očekávaných 100 pixelů vertikálně jednotka bere 150