Je to skoro tady! Zbývají poslední 3 lekce!
V dnešní lekci budeme pokračovat v popisu box modelu vlastnostmi padding a margin.
Pokračuj se svým kódem z minulé lekce.
Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení náš projekt ve stavu, v jakém jsme ho opustili v minulé lekci: czchts.cz/htmlcss08
Budeme pokračovat dalšími vlastnostmi box modelu, s jehož popisem jsme začali v minulé lekci. Tentokrát se budeme věnovat nastavování rozestupů a vytváření volného prostoru uvnitř a vně boxu.
Nechceme-li, aby byl obsah boxu namáčknutý přímo na okraj (nebo rámeček) boxu, musíme přidat odsazení. Odsazení obsahu boxu od jeho okraje se provádí vlastností padding. Padding tedy nastavuje odsazení obsahu od okraje boxu směrem dovnitř boxu.
Hodnotu vlastnosti padding můžeme uvést v libovolných délkových jednotkách, takže kromě px samozřejmě i %, em, rem, a další.
Jako hodnotu vlastnosti padding můžeme uvést:
Potřebujeme-li nastavit odsazení pouze na jednu stranu, můžeme použít vlastnosti padding-left, padding-right, padding-top a padding-bottom. Například:
Pomocí vlastnosti margin můžeme nastavit odsazení prvku od okolních prvků. Pomocí margin nastavujeme mezeru vně boxu. Co se zápisu týče, funguje vlastnost margin úplně stejně, jako výše zmíněný padding:
Pro vertikální rozestupy mezi prvky nastavené pomocí margin platí pravidlo, že když jsou nad sebou prvky a obojí mají nastavený margin, použije se jako rozestup mezi nimi pouze ten větší z nich. Vertikální rozestupy (margin) se tedy nečítají, ale vytváří se něco jako jejich "průnik" (řečeno zjednodušeně a nepřesně).
Má-li horní prvek margin směrem dolů nastavený na 50px a spodní prvek margin směrem nahoru 30px. nebude výsledný rozestup mezi prvky 80px, ale pouze 50px (ten větší z nich).
Toto pravidlo se anglicky označuje jako "collapsing margins".
Pro zvětšení rozestupu mezi dvěma prvky nikdy nepoužíváme značku <br>. Neděláme v obsahu prázdné řádky, abychom roztáhli obsah od sebe. Potřebujeme-li mezi prvky větší rozestup, upravíme vždy jejich margin.
Spousta prvků má ve výchozím nastavení prohlížeče nastavenou nějakou hodnotu buď paddingu nebo marginu. Někdy se nám tento výchozí rozestup nehodí a potřebujeme se ho zbavit. Stačí nastavit margin nebo padding na 0 (nulu). Při nulování nemusíme uvádět jednotky, nula v jakýchkoliv jednotkách je vždy nula.
Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.