MENU

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

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548 

Používáme cookies

Soubory cookie používáme k analýze údajů o našich návštěvnících, ke zlepšení našich webových stránek, zobrazení personalizovaného obsahu a k tomu, abychom od vás měli zpětnou vazbu.