Yazılım Örnekleri

HTML elementinin kenarlarının içinde boşluk yaratmak istediğimizde padding özelliğini kullanırız.

Bu boşlukları üst, sol, alt ve sağ için ayrı ayrı belirleyebildiğimiz gibi tek bir css koduyla da bu boşluları belirleyebilriz.

Tüm padding komutları:
padding-top - Üst kısımdan boşluk bırakır.
padding-right - Sağ kısımdan boşluk bırakır.
padding-bottom - Alt kısımdan boşluk bırakır.
padding-left - Sol kısımdan boşluk bırakır.
padding - Tüm kısımlardan boşluk bırakır.

Padding komutunun Alabileceği değerler: 

genişlik belirtme - px, em, pt gibi ölçülerle
yüzde kullanma (%) - İçerik genişliğine göre yüzdelik oranlama ile

Kod:
.divim
{
padding-top: 20px;
padding-bottom: 20px;

padding-left: 30px;
padding-right:30px;
}

Yukarıdaki örnekte divin iç kısmında üstten ve alttan 20px, sağ ve soldan 30 piksellik boşluklar bırakacaktır.

İç Boşlukları Tek Seferde Ayarlarmak için  sırasıyla üst, sağ, alt, sol şeklinde değerler yazarak da 4 bölgeyi tek satırda yazabiliriz.

Kod:
.divim
{
/* Dağılımı: padding: [üst] [sağ] [alt] [sol] */

padding: 20px 30px 20px 30px;
}

Eğer div içine vereceğimiz boşlukta yukarı ve alt değerler ile Sağ ve sol değerler aynı olacaksa aşağıdaki şekilde kullanabiliriz

Kod:
.divim
{
/* Dağılımı: padding: [üst|alt] [sağ|sol] */

padding: 20px 30px;
}