Box model
Box má niekoľko vlastností, vďaka ktorým môžeme meniť jeho veľkosť, vzhľad a pozíciu na stránke, a tak meniť vzhľad celej stránky.
Aké vlastnosti má taký box dobre vysvetľuje táto schéma:
- content: obsah boxu, t.j. text, ktorý je uzavretý medzi otváracou a zatváracou značkou;
- border: rámovanie - farebná čiara danej hrúbky, okolo boxu.
- padding: vsadenie - odstup od rámika z vnnútornej strany,
- margin: okraj - odstup boxu od ostatných boxov na stránke.
Nadpisy, odstavce, odrážky a ďalšie prvky, to všetko sú takéto bloky.
Každý nich má už nejako tieto vlastnosti nastavené.
Napríklad tieto tri odstavce sú od seba oddelené medzerou, lebo majú nastavenú vlastnosť margin.
Cvičenie:
- Zapni si pomôcku pre vývojárov kombináciou kláves Ctrl + Shift + I.
- V okienku pomôcky pre vývojárov nájdeš nástroj Výber prvku.
- Týmto nástrojom prechádzaj po stránke a ukazuj myšou na rôzne prvky - zvýraznia sa obdĺžnikom.
- V ľavej časti pomôcky vidíš HTML kód ukázaného prvku, v pravej časti okna vidíš jeho štýly.
@VIDEO: