Úvod do HTML a CSS - lekce 8

Podklady ke stažení

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

Box model - pokračování

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.

Odsazení obsahu od okraje boxu (padding)

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.

.box {
 padding: 30px;
}

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:

• 1 číslo - stejné odsazení se použije na všech stranách boxu
• 2 čísla oddělená mezerou - první hodnota se použije pro horní a dolní odsazení, druhá hodnota pro odsazení vpravo a vlevo
• 4 čísla oddělená mezerou - první hodnota se použije pro horní odsazení, ostatní se pak aplikují postupně na strany boxu po směru hodinových ručiček (tj. vpravo, dole a poslední vlevo)

/* odsazení obsahu od okraje stejné kolem dokola */
.box1 {
 padding: 30px;
}

/* nahoře a dole odsazení 30px, po stranách 50px */
.box2 {
 padding: 30px 50px;
}

/* osazení nahoře 30px, vpravo 50px, dole 70px, vlevo 10px */
.box3 {
 padding: 30px 50px 70px 10px;
}

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:

.box {
 padding-right: 20px;
}

Rozestup mezi prvky (margin)

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:

• Hodnoty uvádíme v libovolných délkových jednotkách
• Můžeme uvést 1, 2 nebo 4 hodnoty oddělené mezerou
• Pro nastavení odstupu pouze na jedné straně můžeme použít margin-left, margin-right, margin-top, margin-bottom.

/* stejný odstup od prvku na všech stranách */
.box1 {
 margin: 30px;
}

/* nahoře a dole odstup 30px, po stranách 50px */
.box2 {
 margin: 30px 50px;
}

/* odstup nahoře 30px, vpravo 50px, dole 70px, vlevo 10px */
.box3 {
 margin: 30px 50px 70px 10px;
}

/* odstup lze nastavit i pro jednu stranu samostatně */
.box4 {
 margin-left: 30px;
 margin-top: 20px;
}

Prolínání rozestupů

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".

Řídíme rozestup mezi prvky

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.

/*
Nadpis <h1> má pod sebou a nad sebou odstup od okolních prvků 30px.
Vlevo a vpravo je nulová mezera. Tj. obsah je až do kraje.
*/
h1 {
 margin: 30px 0;
}

/* vynulujeme výchozí padding u těla stránky */
body {
 padding: 0;
}

Kontrolní otázky

• Co nastavujeme vlastností padding?
• Co nastavujeme vlastností margin?
• Když uvedu za padding 2 hodnoty, jaký budstup obsahu od okraje boxu?
• Když za margin uvedu 4 hodnoty oddělené mezerou, tak jaký bude rozestup od okolních prvků po všech stranách boxu?
• Jak se chovají okraje (margin), když máme nad sebou dva prvky?

‍