CSS Margin e bir alternatif olarak düşünülen fakat aslında bambaşka bir özellik olan padding ise kullanımı margin gibi olan fakat bu çerçevede ayıracağımız boşluğu, çerçeve, başka bir katmandan uzaklaşma, bir nesneye olan uzaklık olarak değer katılır.. Padding özelliği ile, örneğin; bir yazınınza çerçeve eklediyseniz yada background color özelliği verdiyseniz, bu background’unuzu ya da çerçeveyi dilediğiniz kadar uzatma, ya da o belirlediğiniz çerçeveyi yazıdan uzaklaştırma işlevi gibi düşünülebilir.

Olası Değerler

Bireysel Paddin Özellikleri

Padding özelliği de margin de olduğu gibi bireysel şemalar kullanılabilir.. Bu ayarlar top, left, right ve bottom şeklinde yön belirtirler.Örnek;

padding-top:25px;
 padding-bottom:25px;
 padding-right:50px;
 padding-left:50px;

Farkındaysanız margin özelliği ile tıpa tıp aynı gibi görünüyor.. Fakat buradaki değişkenimiz padding olarak ayarlı.. Yukarıda padding açıklamasını yaptığım için daha fazla irdelemiyorum.

Margin de olduğu gibi padding içerisinde de kısa kodları kullanabiliriz ve bu kodlara ancak 4 değere kadar atama yapabiliriz.Bunlar top, left, right ve bottom şeklindedir.

Top: yukarıdan alacağı değer

left: soldan alacağı değer

right: sağdan alacağı değer

bottom: aşağıdan alacağı değer.

Örnek;

p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}

Yukarıda ex1 sınıfının tüm padding değerleri 2cm iken, ex2 sınıfının sağ ve sol değeri 3cm, aşağı ve yukarı değerleri ise 0,5cm ‘dir.

padding:1px 2px 3px 4px şeklinde yapılacak sıralama da

top, right, bottom ve left sıralaması hakimdir.

Bütün CSS Padding Özellikleri