Vlastnost Padding
(Ukázka z knihy CSS Kaskádové styly pro webdesignéry)
Sdružená vlastnost umožňující současné nastavení dílčích vlastností padding-top, padding-right, padding-bottom a padding-left.
Rychlý přehled vlastnosti
| Možné hodnoty: | [<velikost> | <procenta>]{1,4} | inherit |
| Výchozí hodnota: | - |
| Ovlivňuje: | všechny prvky |
| Dědičná: | ne |
| Procenta: | vztahují se k šířce obsahujícího bloku |
| Média: | vizuální |
| Kompatibilita: |
|
Význam hodnot
- <velikost>
- nastaví pevnou velikost výplně
- <procenta>
- nastaví velikost výplně v procentech z šířky obsahujícího bloku generovaného boxu, a to i v případě vlastností
padding-topapadding-bottom. - inherit
- hodnota se zdědí po rodičovském prvku
Je-li určena pouze jedna hodnota, vztahuje se na všechny čtyři strany. Jsou-li zadány dvě hodnoty, první se vztahuje na horní a dolní výplň (vlastnosti padding-top a padding-bottom), kdežto druhá na levou a pravou výplň (vlastnosti padding-left a padding-right). Jsou-li určeny tři hodnoty, první se vztahuje na horní výplň (padding-top), druhá na svislé výplně (padding-left a padding-right) a třetí na spodní výplň (padding-bottom). Čtyři zadané hodnoty se aplikují na výplně v pořadí horní, pravá, spodní a levá (padding-top, padding-right, padding-bottom, padding-left). Barva nebo obrázek zobrazené v oblasti výplně jsou určeny vlastností background.
Další informace o výplních a formátování boxů naleznete v části Koncepce boxů.
Ukázka použití
Následující příklad určuje výplně okolo obsahu prvků H1 — 1em nahoře a dole, 2em vlevo a vpravo:
h1 {
padding: 1em 2em;
}
Příklad má stejný efekt, jako tento zápis:
h1 {
padding-top: 1em;
padding-left: 2em;
padding-bottom: 1em;
padding-right: 2em;
}
Následují další dva způsoby, jak lze dosáhnout stejného výsledku pomocí sdružené vlastnosti padding:
h1 {
padding: 1em 2em 1em 2em;
}
h1 {
padding: 1em 2em 1em;
}
Výplň o stejné velikosti na všech čtyřech stranách lze nastavit jednou hodnotou takto:
h1 {
padding: 1em;
}
Praktické využití
Výplň (padding) se používá k vizuálnímu oddělení zejména textového (ale i grafického) obsahu od orámování, resp. okraje boxu. V případě textového obsahu je vhodné určovat padding v jednotkách em, aby velikost výplně zachovávala stejné proporce k nastavené velikosti písma.
Při nastavování velikostí jednotlivých oblastí boxu (okraje, orámování a výplň) je třeba rozlišovat rozdíly mezi výplní (padding) a okraji (margin):
Oblast výplně (padding) leží mezi oblastí obsahu a orámováním a odděluje tedy vizuálně obsah od orámování. Naproti tomu oblast okrajů (margin) leží až vně oblasti orámování a odděluje tedy box od jiných boxů. Viz též obrázek v části Rozměry boxu.
Oblast výplně je vykreslena v barvě pozadí (
background-color) daného prvku, resp. se v ní zobrazuje obrázek na pozadí daného prvku (dílčí vlastnosti sdružené vlastnostibackground). Naproti tomu je oblast okrajů (margin) vždy průhledná a zobrazuje se v ní tedy barva, resp. grafické pozadí a případně i obsah prvku ležícího na ose z za daným boxem.
Časté problémy aplikací vlastnosti padding způsobuje chybná implementace koncepce boxů, konkrétně výpočet šířky a výšky, v prohlížečích Internet Explorer pro Windows. Jak se můžete dočíst v části Rozměry boxu, dle Specifikace je celková šířka boxu součtem levých i pravých okrajů (vlastnosti margin), orámování (vlastnosti border), výplní (vlastnosti padding) a šířky obsahu (vlastnost width). Totéž analogicky platí i pro celkovou výšku boxu.
Podle Specifikace se chovají všechny moderní minoritní prohlížeče (Opera, NN6+, Mozilla atd.) a též Internet Explorer 6.0 pro Windows ve standardním režimu. Starší verze IE/Win a verze 6 v režimu zpětné kompatibility se však chová jinak — výplň a orámování zahrnuje do šířky/výšky obsahu a celková šířka/výška boxu se tedy rovná součtu vlastností width/height a margin.
Praktické důsledky si ukážeme na jednoduchém příkladu. Mějme tento stylový předpis:
div.box {
width: 100px;
padding: 10px;
border-width: 2px;
margin: 20px;
}
Celková šířka vykresleného boxu bude např. v NN6: levý okraj 20px, levé orámování 2px, levá výplň 10px, šířka obsahu 100px, pravá výplň 10px, pravé orámování 2px, pravý okraj 20px, celkem tedy 164px.
V IE5/Win (a stejně tak v IE4/Win či Internet Explorer 6.0 pro Windows v režimu zpětné kompatibility), bude šířka obsahu i celková šířka o 24 pixelů menší: levý okraj 20px, šířka obsahu + výplň + orámování 100px, pravý okraj 20px, celkem 140px.
Poznámka: Internet Explorer 6 pro Windows rozlišuje standardní režim a režim zpětné kompatibility. O volbě tohoto režimu rozhoduje deklarovaný typ dokumentu (tzv. DOCTYPE).
Pokud na přesných rozměrech boxu záleží, stává se tento problém nepříjemným. Proto bylo vyvinuto několik řešení, z nichž zřejmě nejjednodušší je box v boxu. Jak již název napovídá, spočívá v tom, že se požadovaný box vytvoří dvěma vnořenými prvky, z nichž vnější bude určovat šířku obsahu i výplně pro vnitřní:
div.vnejsi {
width: 120px;
border-width: 2px;
margin: 20px;
}
div.vnitrni {
padding: 10px;
}
Pokud nyní tyto dva prvky vnoříme takto do sebe:
<div class="vnejsi">
<div class="vnitřní">
... obsah ...
</div>
</div>
bude rozdíl mezi dvěma výpočty šířek činit již jen 4px (orámování). V IE5 bude celková šířka boxu 160px, kdežto v NN6 164px. Kdybychom chtěli eliminovat i rozdíl daný tloušťkou orámování, museli bychom použít tři prvky, nebo jinou metodu, např. tzv. trik Tanteka Celika. Ten by vypadal takto:
div.box {
width: 124px;
padding: 10px;
border-width: 2px;
margin: 20px;
voice-family: "\"}\"" ;
voice-family: inherit;
width: 100px;
}
html>div.box {
width: 100px;
}
Trik využívá chyby v IE/Win nižších verzí než 6. Podivně vypadající vlastnosti voice-family nemají jiný význam než ten, že zabrání IE/Win nižší verze než 6 přečíst pravidla, která za nimi následují. Prohlížeč se totiž nesprávně domnívá, že pravidlem
voice-family: "\"}\"" ;
celá definice končí. Stejnou chybu však má i Opera a pro ni tedy platí druhá definice, využívající selektor, který IE/Win nepodporuje. Výsledkem je, že všechny prohlížeče sice nejprve zpracují pravidla:
width: 124px;
padding: 10px;
border-width: 2px;
margin: 20px;
IE/Win tím však skončí, kdežto ostatní moderní prohlížeče (NN6+, Opera, Mozila, IE/Mac) ještě přenastaví vlastnost width na 100px.
Na metodu box v boxu jsme odkázáni také tehdy, když chceme kombinovat šířku prvku v procentech s výplní v jiných jednotkách. Představte si, že potřebujete box, který zabírá přesně 70 % šířky obsahujícího bloku a má výplň o šířce 1em a orámování 1px. Kdybychom box nadefinovali takto:
div.box {
width: 70%;
border-width: 1px;
padding: 1em;
}
byl by ve skutečnosti ve všech prohlížečích mimo IE/Win do verze 5.5 včetně o 2px a 2em širší než 70 % obsahujícího bloku. Typické řešení metodou box v boxu by vypadalo takto:
div.vnejsi {
width: 70%;
}
div.vnitrni {
border-width: 2px;
padding: 10px;
}
Předpokladem je, že jsou oba prvky do sebe takto vnořeny:
<div class="vnejsi">
<div class="vnitřní">
... obsah ...
</div>
</div>
Vnější box tak omezuje maximální celkovou šířku vnitřního boxu a ten naopak vyplní celou vnitřní šířku boxu vnějšího, neboť výchozí hodnota vlastnosti width je auto.
Toto je ukázka z knihy Marka Prokopa CSS Kaskádové styly pro webdesignéry, kterou vydalo nakladatelství Mobil Media a.s. v roce 2003. Knihu si od nás můžete objednat za 280 Kč.
