CSS - nastavení rozměrů objektů na stránce

Velmi důležitou, ale často ne zcela pochopenou problematikou je nastavení rozměrů samotných objektů (na obrázku níže pojmenovaný content).

V kooperaci s CSS třídami jsou klíčovýmmi nástroji tvorby vzhledu webových stránek.

Každý element (obsah jakékoliv HTML značky) má okolo sebe v každém ze čtyřech směrů vymezený prostor daný prohlížečem. Například odstavec (p), nadpisy (h1, h2...), obrázek (img), odrážky a číslované seznamy (ul, ol, li), tučný text a kurzíva (b, i), hypertextový odkaz (a)... no prosttě všechny.

• border - ohraničení. Má každá značka, ale bez obarvení nebo jiné změny vzhledu není vidět. Na obrázku níže je to hranice mezi margin a padding.
• margin - vnější vzdálenost od okraje jedné značky k okraji sousední značky nebo hranici okna prohlížeče.
• padding - vnitřní vzdálenost mezi samotným obsahem značky a jeho ohraničením.

Video níže názorně vysvětluje využití těchto CSS vlastností.

---

Vzdálenost jde definovat v mnoha jednotkách. Běžně si vystačíme

• s absolutní jednotkou px (pixel). 1px je jeden obrazový bod.
• s relativní jednotkou em. 1em je přibližně výška řádku textu odstavce (není to přesná definice, pro běžné potřeby stačí).

margin (vnější okraj)

margin-top: 2em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 2em;
margin: 3em; /*všechny strany*/
margin: 2em 1em 2em 1em; /*top right bottom left*/
margin: 2em 1em; /*2em top a bottom, 1em right a left*/

padding (vnitřní okraj)

padding-top: 2em;
padding-right: 2em;
padding-bottom: 2em;
padding-left: 2em;
padding: 3em; /*všechny strany*/
padding: 2em 1em 2em 1em; /*top right bottom left*/
padding: 2em 1em; /*2em top a bottom, 1em right a left*/

border (okraj)

border-top: 1px solid red; /*horní strana: šířka styl barva*/
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border: 1px solid red; /*všechny strany: šířka styl barva*/

Další efekty

Dalšími často používanými efekty jsou:

border-radius (zakulacené rohy)

border-radius: 10px;

box-shadow (stín)

box-shadow: 10px 10px 5px gray;
/* posun v ose x, posun v ose y, šířka stínu, barva stínu */