Padding elementlerin içeriğinin elementlere olan uzaklığının yani iç kenar boşluklarının belirlenmesine yardımcı olur.

element{padding:10px 10px 10px 10px;}

element "üst sağ alt sol"

veya

1- {padding:10px;}           =     {padding:10px 10px 10px 10px;} veya

{

padding-top:10px;

padding-right:10px;

padding-bottom:10px;

padding-left:10px;

}

2- {padding:10px 40px;}    =     {padding:10px 40px 10px 40px;}

Yukarıda görebileceğiniz gibi padding özelliğini kısaltarak yazabilmekte mümkün. Sadece {padding:10px;} dediğinizde içeriğinizin bütün kenarlarından 10 ar piksel boşluk bırakacaktır. İkinci örneğimizde ise yine üst-alt ve sağ-sol ilişkisinin olduğunu göreceksiniz.

CSS Padding Örnekleri: