Proprietatea padding

Proprietatea padding stabilește spațiul interior al elementului. Valoarea proprietății sunt orice unități pentru dimensiuni. În mod implicit, fiecare browser poate adăuga elementelor diverse spații. Proprietatea este o prescurtare pentru proprietățile padding-top, padding-right, padding-bottom, padding-left.

Sintaxă

cssselector {
  padding: valoare;
}

Proprietatea padding acceptă 1, 2, 3 sau 4 valori, enumerate prin spațiu:

Număr	Descriere
`1`	O valoare stabilește spațiul din toate părțile elementului.
`2`	Prima valoare stabilește spațiul de sus și de jos, iar a doua - din dreapta și stânga.
`3`	Prima valoare stabilește spațiul de sus, a doua - din dreapta și stânga, iar a treia - de jos.
`4`	Prima valoare stabilește spațiul de sus, a doua - din dreapta, a treia - de jos, iar a patra - din stânga.

În acest caz, în mod implicit, spațiul interior va fi zero și textul va fi lipit de marginea blocului:

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

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

Результат:

Și acum să facem spațiul interior de 30px:

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

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

Результат:

Acum spațiul de sus și de jos va fi 20px, iar din dreapta și stânga - 5px:

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

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

Результат:

Acum spațiul de sus 5px, din dreapta - 15px, de jos - 25px, din stânga - 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;
}

Результат: