PADDING – css vlastnost pro odsazení uvnitř elementu
Padding vytváří odsazení uvnitř jakéhokoli HTML elementu. Představte si příklad. Vytvoříte <div>, uděláte mu pozadí a umístíte do něj nějaký obsah (odstavec, obrázky...). Asi budete chtít, aby se obsah netlačil na samotný okraj pozadí, ale aby se mezi okrajem pozadí a obsahem vytvořil určitý prostor, a k tomu právě slouží padding.
Existuje v CSS 1, 2 a 3 | není dědičný | dobře podporován všemi moderními prohlížeči
Hodnoty vlastnosti PADDING
- 1px – číselné v pixelech, pixel je obrazový bod a při tvorbě webových stránek se používá nejčastěji
- 1% – číselné v procentech, která není absolutní (neměnná), prohlížeč rozměr dopočítá vůči nadřazenému HTML elementu
- 1mm – číselné v milimetrech, používá se pro tisk, který se udává v metrické soustavě
- 1cm – číselné v centimetrech, používá se pro tisk, který se udává v metrické soustavě
- 1in – číselná v palcích (1in = 2,54cm) a užívá se pro tisk tam, kde se počítá v palcích
- 1pt – číselná v typografických bodech (1/72 palce), které se používají u fontů
- 1pc – číselná pica což je 12px
- 0 – u nuly není nutné psát hodnotu
Způsob zápisu
Odsazení mohou být celkem čtyři (nahoře: top, vpravo: right, dole: bottom, a vlevo: left). Pokud byste chtěli definovat pouze horní odsazení, může zápis vypadat následovně:
selektor {
padding-top: 5px;
}
Můžete provést i zjednodušený zápis. Pokud např. mají být všechna odsazení stejná, může zápis vypadat takto:
selektor {
padding: 5px;
}
Stává se, že potřebujete mít jeden rozměr nahoře a dole, ale jiný vlevo a vpravo, pak je možné zapsat prvním číslem horní / dolní a druhým číslem levý / pravý rozměr. Zápis může vypadat takto:
selektor {
padding: 5px 8px;
}
Když potřebujete zapsat každý rozměr jiný, je snazší psát jednu hodnotu za druhou. První je hodnota znamená nahoře a další hodnoty jdou po směru hodinových ručiček, tedy první nahoře, druhá vpravo, třetí dole, čtvrtá vlevo. Zápis může vypadat takto:
selektor {
padding: 1px 2pt 3% 4in;
}
Kam dál
Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla Obecná pravidla CSS