#1 Padding
Padding, česky také někdy jako výplň nebo vnitřní okraj, je CSS vlastnost, která zvětšuje prvek, avšak ne jeho velikost obsahu. Jedná se svým způsobem o hranici, která je ale součástí prvku, narozdíl od vlastnosti margin. Jestliže je prvku definována barva pozadí, padding bude touto barvou také zbarven.
V CSS se zapisuje jako padding, přičemž může obsahovat jakékoli číselné jednotky.
div {
padding: 50px;
}
Vlastnost padding se přičítá k šířce prvku, jestliže není definováno jinak. Tudíž, například, jestli má prvek definovanou šířku 250px a padding 25px, jeho výsledná šířka bude 300px => 250px + 25px zprava a zleva.
div {
width: 250px
padding: 25px
}
Jestliže chcete tomuto chování předejít, je potřeba definovat vlastnost box-sizing: border-box;, která udává, že cokoli co zvětšuje okraje prvku, bude zahrnuto v šířce. V tomto případě bude vlastnost padding ubírat vnitřní obsah.
div {
width: 250px
padding: 25px
box-sizing: border-box;
}
#2 Varianty
Samotná vlastnost padding definuje totožný rozměr na všech stranách prvku. Jestliže chceme definovat pouze jednu stranu, existují pro to další čtyři vlastnosti, které z té základní vycházejí – padding-top, padding-right, padding-bottom a padding-left, každá z nich definující svojí relativní stranu.
/* Prvek <div>, který bude mít padding pouze vpravo a vlevo */
div {
padding-left: 30px;
padding-right: 30px;
}
Zkracování
Předchozí uspořádání však je často kvůli definování jednotlivých stran zbytečně dlouhé. Proto, lze ve vlastnosti padding specifikovat všechny strany na jednom řádku – v pořadí: top, right, bottom, left.
S tímto se pojí i druhá vlastnost, zkracování. Jestliže se nespecifikují všechny čtyři strany, bude se přejímat jejich protější strana z té definované – jinými slovy, jestliže je definována horní a pravá strana, spodní bude mít velikost horní a levá velikost pravé. Příklad výše lze tedy zapsat těmato způsoby:
/* Nezkráceně */
div {
padding: 0 30px 0 30px;
}
/* Zkráceně */
div {
padding: 0 30px;
}
Definovat lze také 3 strany, přičemž platí stejné podmínky, s rozdílem, že se aplikuje pouze pravá strana na levou. V tomto případě bude horní strana 0px, pravá a levá 30px a spodní 15px.
div {
padding: 0 30px 15px;
}