Padding

CSS vlastnost padding určuje šířku vnitřního okraje prvku.

Výchozí hodnota paddingu jsou nulové okraje (jako 0px). V případě zadání procenty se horní a spodní padding počítá nikoli z výšky prvku, ale z jeho šířky (netestováno).

Padding se může zadávat jednou hodnotou najednou pro všechny čtyři strany, nebo se vypíše více hodnot pro různé strany (to je to a b c d).

Existují varianty padding-top, padding-right, padding-bottom a padding-left určené jen pro zadání jedné strany vnitřního okraje. Mají stejné hodnoty.

Pod vnitřním okrajem (paddingem) se vykresluje pozadí. Pod vnějším okrajem (margin) ne.

Padding se dá nastavit pro buňky tabulek, čímž nahrazuje tabulkový atribut cellpadding (cellspacing se v css nahrazuje vlastností border-spacing, ale v Exploreru to nefunguje, takže se musí používat cellspacing).

Podpora

Příklady

U pozicovaných a beztabulkových layoutů bývá zvykem uzavírat bloky textu do tagů <div>. Pokud se divům přidá rámeček nebo pozadí, je potřeba, aby se text nelepil na okraje. Přesně na to je padding:

<style>
.sdeleni {background-color: ivory; border: 1px solid gray; padding: 8px}
</style>

<div class="sdeleni">Text s orámováním a okraji. Má třídu sdeleni.</div>

Zobrazit tento příklad na padding.

Více stran najednou

Pokud chci třeba udělat odstavec, který bude mít horní a dolní padding 2em, ale pravý a levý nulový, můžu použít dva zápisy. První možnost:

padding: 2em 0px

Druhá možnost (méně elegantní):

padding-left: 0px; padding-right: 0px; padding-top: 2em; padding-bottom: 2em

Rozdíly módů

Při přesném počítání s paddingem je důležité vědět, jestli se stránka bude vykreslovat ve quirk módu nebo ve standardním módu. V quirk módu se padding počítá do šířky, ve standardním módu nikoliv.

<div style="padding-left: 30px; width: 120px">

Tento oddíl bude zabírat různou celkovou šířku v různých prohlížečích. V Mozille 150 pixelů, v Internet Exploreru 5 bude zabírat 120 pixelů, protože padding se tam započítává do šířky. V Internet Exploreru 6 bude vykreslení závislé na <!doctype.

Protože se padding počítá v každém módu jinak, existují způsoby, jak to ohackovat, aby to vypadalo všude stejně. Používají se různé komplikované zápisy. Asi nejelegantnější je Pixiho Matroška hack, který vychází z toho, že se padding vůbec nepoužije. Místo zápisu jednoho divu:

<div style="padding: 30px; background-color: navy;">
obsah oddílu zastarale
</div>

se použije zápis dvou divů:

<div style=" background-color: navy;">
<div style="margin: 30px;">
obsah oddílu s matroška hackem
</div>
</div>

Výsledek je vzhledově stejný, ale funguje ve všech prohlížečích stejně. Jak vidno, namísto paddingu se použije margin u zanořeného prvku.

Padding pro řádkové prvky

Nejčastěji je to potřeba u odkazů:

<style>
.nafouknuty {padding: 4px; background-color: silver}
</style>
<a href="nekam.html" class="nafouknuty">nafouknutý odkaz</a>

Zobrazit tento příklad padding použitý na odkaz. Internet Explorer 4 a 5.0 to neumějí vykreslit správně, protože nedávají padding řádkovým prvkům. Částečným řešením může být nastavit odkazům, že jsou blokové prvky pomocí display: block.

Další příklady

Yuhůůovy oblíbené nadpisy

Textové odkazy jako tlačítko

Barvení a odsazení číslíčka nebo odrážky seznamu

Vizte též

Margin = vnější okraj, Border = rámeček, Background = pozadí (vykresluje se pod paddingem), Módy prohlížečů = způsob počítání rozměrů, -moz-box-sizing = nestandardní počítání rozměrů v Mozille

Odkazy

Okraje objektů - margin a padding