Více hodnot najednou
Psát každou stranu zvlášť je zdlouhavé. Proto mohou mít vlastnosti padding a margin až čtyři hodnoty:
- Jedna hodnota platí pro všechny čtyři strany:
padding: 10px. - Dvě hodnoty: první platí pro horní a dolní stranu, druhá pro levou a pravou:
padding: 10px 20px. - Čtyři hodnoty jdou po směru hodinových ručiček od horní strany: nahoře, vpravo, dole, vlevo. Například
margin: 0 0 10px 0nastaví dole okraj 10 pixelů a na ostatních stranách nulový.
(Můžete se setkat i se třemi hodnotami: nahoře, pak vlevo a vpravo a nakonec dole.)
U okrajů je dobré vědět ještě jednu věc. Když jsou pod sebou dvě karty s okraji 20 pixelů, mohli byste čekat, že mezi nimi bude mezera 40 pixelů: 20 pod první kartou a 20 nad druhou. Svislé okraje sousedních prvků se ale překrývají: mezera je tak velká jako větší z obou okrajů, tady tedy 20 pixelů. Říká se tomu slučování okrajů (anglicky margin collapsing).
Jak psát:
"
{
}
#
Pokyny
V pravidle pro .nadpis-pozadi nahraďte obě deklarace padding-top: 30px a padding-bottom: 30px jedinou: padding: 30px 20px. Polstrování zůstane nahoře a dole 30 pixelů a nově bude 20 pixelů i vlevo a vpravo, aby se nadpis na úzké obrazovce nedotýkal krajů.
V pravidle pro .skupina, #plemena nahraďte margin-top: 20px deklarací margin: 20px 0. Karty tak budou mít okraj i pod sebou, takže pod poslední kartou bude volné místo, ale mezera mezi dvěma kartami zůstane 20 pixelů.
Nadpisy v kartách mají nad sebou velkou mezeru: polstrování karty a k tomu výchozí horní okraj nadpisu. Do pravidla pro h2 přidejte margin: 0 0 10px 0. Tím odstraníte horní okraj a pod nadpisem zůstane mezera 10 pixelů.
Začněte programovat zdarma
9/12