Svojstvo padding

Svojstvo padding postavlja unutrašnji odstup elementa. Vrednostima svojstva služe bilo koje jedinice za veličine. Podrazumevano, svaki brauzer može dodavati elementima različite odstupe. Svojstvo je skraćenica za svojstva padding-top, padding-right, padding-bottom, padding-left.

Sintaksa

cssselektor {
  padding: vrednost;
}

Svojstvo padding prihvata 1, 2, 3 ili 4 vrednosti, navedene razmakom:

Broj	Opis
`1`	Jedna vrednost postavlja odstup sa svih strana elementa.
`2`	Prva vrednost postavlja odstup odozgo i odozdo, a druga - sa desne i sa leve strane.
`3`	Prva vrednost postavlja odstup odozgo, druga - sa desne i sa leve strane, a treća - odozdo.
`4`	Prva vrednost postavlja odstup odozgo, druga - sa desne strane, treća - odozdo, a četvrta - sa leve strane.

U ovom slučaju, podrazumevano, unutrašnji odstup će biti nula i tekst će biti prislonjen na ivicu bloka:

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

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

Результат:

A sada hajde da napravimo unutrašnji odstup od 30px:

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

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

Результат:

Sada će odstup odozgo i odozdo biti 20px, a sa desne i sa leve strane - 5px:

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

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

Результат:

Sada je odstup odozgo 5px, sa desne strane - 15px, odozdo - 25px, sa leve strane - 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;
}

Результат: