Vlastnost padding

Vlastnost padding nastavuje vnitřní odsazení elementu. Hodnotou vlastnosti jsou jakékoli jednotky pro velikosti. Ve výchozím nastavení může každý prohlížeč přidávat elementům různá odsazení. Vlastnost je zkratkou pro vlastnosti padding-top, padding-right, padding-bottom, padding-left.

Syntaxe

cssselektor {
  padding: hodnota;
}

Počet parametrů

Vlastnost padding přijímá 1, 2, 3 nebo 4 hodnoty, vyjmenované mezerou:

Příklad

V tomto případě bude ve výchozím nastavení vnitřní odsazení nulové a text bude přitisknut k hranici bloku:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Příklad

A nyní uděláme vnitřní odsazení 30px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Příklad

Nyní bude odsazení shora a zdola 20px, a zprava a zleva - 5px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Příklad

Nyní je odsazení shora 5px, zprava - 15px, zdola - 25px, zleva - 35px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Viz také