Padding

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

padding
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:

Varianty vlastnosti padding
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

Podpora vlastnosti padding
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

Yuhůůovy oblíbené nadpisy

Textové odkazy jako tlačítko

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

Poslední aktualizace 18. 2. 2016

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.