CSS Padding

Mostenit: NU

Padding-ul este distanta dintre bordura unui element (X)HTML si continutul lui. Majoritatea regulilor de la marginile css se aplica si la padding, cu exceptia ca aici nu exista valoarea "auto" si nu pot fi declarate valori negative.

padding-top: lungime procent;
padding-left: lungime procent;
padding-right: lungime procent;
padding-bottom: lungime procent;

Puteti observa in exemplul de mai sus, ca aveti la dispozitie doua posibilitati pentru proprietatea "padding": lungime si procent. Este posibil sa declarati padding-ul pentru un element intr-o singura proprietate, astfel:

padding: 10px 10px 10px 10px;

Daca declarati toate cele patru valori, ca in exemplul de mai sus, ordinea lor este urmatoarea:

sus
dreapta
jos
stanga

In cazul in care declarati o singura valoare, aceasta este valabila pentru toate cele patru laterale ale elementului respectiv.

padding: 10px;

Daca declarati doar doua sau trei valori, valorile nedeclarate sunt luate din partile opuse:

padding: 10px 10px; /* 2 valori */
padding: 10px 10px 10px; /* 3 valori */

Dupa cum stiti ordinea celor 4 valori este: sus, dreapta, jos, stanga. Cand declarati doar primele doua inseamna ca ati declarat valoarea pentru sus si pentru dreapta. Valorile pentru celelalte doua vor fi: jos=sus, stanga=dreapta.

Daca nu declarati padding-ul unui element, acesta va fi implicit egal cu zero.

NOTA: daca valoarea pe care o atribuiti marginii este egala cu zero, nu mai este necesara specificarea unitatii de masura, fie ea pixel, punct, sau oricare alta.

Se poate vedea mai jos, cum containerul principal are padding-ul setat la 30px (pixeli) intre marginea lui si textul continut.

#container{
  width: 70%;
  margin: auto;
  padding: 30px;
  border: 1px solid #666;
  background: #ffffff;
}