CSS Padding Kullanımı

CSS Padding Özelliği

CSS padding özelliği içerik ile sınır çizgisi (border) arasında boşluk üretmek için kullanılır.

Padding içerik etrafında boşluk oluşturarak sınır çizgisini (border) uzaklaştırır.

CSS ile padding üzerinde tam kontrol sağlanır.  Alt, üst, sağ, sol istenilen tüm taraflardan bu boşluk ayarlanabilir.

Padding ile Her Taraf Ayrı İç Boşluk Vermek

CSS bir elementin tüm taraflarına ayrı boşluk verecek özelliklere sahiptir:

• padding-top iç üst boşluk
• padding-right iç sağ boşluk
• padding-bottom iç alt boşluk
• padding-left iç sol boşluk

Tüm bu padding değerleri aşağıdaki özelliklere sahip olabilir:

• genişlik - px,pt,cm gibi farklı ölçü birimlerinde genişlik değeri atanabilir.
• % - % oranında boşluk verilebilir. Bu oran taşıyıcı elementin genişliği ile şekillenir.
• inherit - ana elementin padding özellikleri inherit atanan elemente geçer.

Aşağıdaki örnekte HTML elementinin 4 farklı köşesine farklı padding değerleri verilmiştir:

p{   
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
   
}

CSS Padding Kısa Yazım

Daha önce bir kaç CSS özelliğinde gördüğümüz gibi padding özelliği de kısa yöntem ile yazılabilir.

Tek satırda bir elementin dört tarafı için farklı paddingler verilebilir.

Kısa yazım padding şu özellikleri içerir:

• padding-top iç üst boşluk
• padding-right iç sağ boşluk
• padding-bottom iç alt boşluk
• padding-left iç sol boşluk

p{
    padding: 50px 30px 50px 80px;  
}

Eğer padding dört değer alıyorsa: padding:10px 20px 30px 40px;

• iç üst boşluk 10px
• iç sağ boşluk 20px
• iç alt boşluk 30px
• iç sol boşluk 40px

Eğer padding üç değer alıyorsa: padding:10px 20px 30px;

• iç üst boşluk 10px
• iç sağ ve sol boşluk 20px
• iç alt boşluk 30px

Eğer padding iki değer alıyorsa: padding:10px 20px;

• iç üst ve alt boşluk 10px
• iç sağ ve sol boşluk 20px

Eğer padding tek değer alıyorsa: padding:10px;

• iç üst, alt boşluk, sağ, sol 10px

div.ornek1 {
    padding: 25px 50px 75px 100px;
}

div.ornek2 {
    padding: 25px 50px 75px;
}

div.ornek3 {
    padding: 25px 50px;
}

div.ornek4 {
    padding: 25px;
}