Padding
CSS vlastnost padding určuje šířku vnitřního okraje prvku.
| hodnoty | vnitřní okraj prvku |
|---|---|
| délka | šířka vnitřního okraje |
| procento | šířka vnitřního okraje jako procento šířky prvku |
| a b c d | a = horní, b = pravý, c = spodní a d = levý vnitřní okraj (viz zadávání stran), kde abcd je nějaká výše uvedená hodnota |
| bez hodnoty (inherit) | prvek nemá žádné vnitřní okraje (jako 0px) |
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:
| varianta | význam |
|---|---|
|
padding-top |
horní vnitřní okraj |
| padding-left | levý vnitřní okraj |
| padding-bottom | spodní vnitřní okraj |
| padding-right | pravý vnitřní okraj |
Pod vnitřním okrajem (paddingem) se vykresluje pozadí. Pod vnějším okrajem (margin) ne. Pokud nechcete, aby se pod paddingem a borderem vykreslovalo pozadí, pohrajte si s vlastností background-origin.
Padding se dá nastavit pro buňky tabulek, čímž nahrazuje tabulkový atribut cellpadding. (Cellspacing se v css nahrazuje vlastností border-spacing.)
Pro padding se někdy používá české slovo "výplň", případně "vnitřní okraj", ale nejčastěji se nepřekládá.
Padding se nezapočítává do šířky prvku. Pokud máte problém s tím, že se padding a border (rámeček) nezapočítávají do šířky prvku, nastavte si box-sizing: border-box. To způsobí změnu počítání šířky prvku tak, že se do ní započítá padding i border.
% paddingu se počítají jen ze šířky
Důležitá poznámka k procentuálním hodnotám pro padding-top a padding: bottom, tedy k vertikálnímu paddingu. V případě použití procentuálních hodnot se procenta neodvozují z výšky prvku, ale ze šířky prvku. (Je to asi kvůli tomu, že na začátku vykreslování nemusí být jasné, jak bude prvek vysoký.)
Podpora
| Prohlížeč | Podpora ve verzích |
|---|---|
|
Internet Explorer |
od verze 7 správně |
| Firefox | všechny verze |
| Chrome, Opera | všechny verze |
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 2em 0px;
Druhá možnost (méně elegantní):
padding-left: 0px; padding-right: 0px; padding-top: 2em; padding-bottom: 2em;
Ta první možnost se dá zapsat jednodušeji:
padding: 2em 0px;
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.
Další příklady
Barvení a odsazení číslíčka nebo odrážky seznamu
Poslední aktualizace 18. 2. 2016
Reklama
