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.
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).
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 |
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.
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;
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.
Barvení a odsazení číslíčka nebo odrážky seznamu
Poslední aktualizace 18. 2. 2016
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.