Výplň se zpravidla používá v kombinaci s rámečkem či výrazným pozadím, aby umožnila obsahu prvku „dýchat“. Podívejte se například na následující nadpis provedený bílým písmem na výrazném pozadí.
Pozadí končící těsně kolem textu působí dost klaustrofobicky, zejména levá strana není dobrá. Špetka výplně situaci vylepší – přidám 0.1em na svislých stranách a 0.5em na vodorovných:
padding: 0.1em 0.5em;
Výsledek je o poznání lepší, ovšem levý okraj vlastního nápisu nyní neodpovídá levému okraji textu stránky. Typické řešení tohoto problému je kompenzovat posunutí doprava způsobené výplní stejně velkým záporným okrajem. Díky němu se celý prvek na levé straně posune doleva a výplň pak jeho obsah posune opět doprava. V konečném efektu se barevné pozadí „vysune“ za hranice textu.
Tentokrát se vyplatí nešetřit a zvolit dostatečně velkou šířku, aby bylo zjevné, že se jedná o úmysl. Lehce povystrčené pozadí by vypadalo spíše jako chyba. Proto definice:
margin: 1em -1em 0.2em; padding: 0.1em 1em;
A jak jsem vlastně realizoval široké okraje kolem textu? Pomocí výplně prvku
<body>, jenž je předkem všech ostatních a proto jim vymezí
dostupný prostor. V definici vzhledu stránky najdete
body {
padding: 1em 15%;
}
Zajistí, že vlevo i vpravo se nachází výplň široká 15 % šířky okna, vlastní obsah stránky proto zabere na šířku jen 70 % dostupného prostoru.
zpět: CSS – okraje