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.

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).

Pro padding se někdy používá hezké české slovo "výplň" (zavedl tuším Pixy).

Podpora

Podpora vlastnosti padding
Prohlížeč Podpora ve verzích Poznámka

Internet Explorer

od verze 7 správně Ve velmi starých prohlížečích mohl být padding chybně započítáván do šířky prvku (spolu s border) - záleželo na doctype. Jako kdyby měl box-sizing: border-box.
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.