Arkadaşlar, bu dersimizde sizlere Padding değerinden bahsedeceğim. Padding; içerik alanına ait olan boşluğu belirleyen bir değerdir. Yani, şöyle ki; Velev ki bir yazı yazdınız, bu yazı için aşağıdan, yukarıdan, sağdan soldan boşluk bırakmak istiyorsunuz. İşte tam bu anda imdadınıza Padding değeri yetişiyor. Çünkü Padding değeri ile isterseniz eşit boşluk belirleyebileceğiniz gibi, isterseniz de sadece kendi belirlediğiniz alanlar için boşluk belirleyebiliyorsunuz. İsterseniz daha iyi anlamak için örnek olarak kodları belirteyim, sizlerde örnekleri boş bir not defteri açarak deneyebilirsiniz.

1) Eşit boşluk bırakma tekniği;

Tekniğin amacı; sağdan, soldan, yukarıdan, aşağıdan eşit bir şekilde boşluk bırakabilmenize olanak sağlamaktır.

İlgili kodlar;

div#padding1 {
padding:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
2) Yukarıdan boşluk bırakma tekniği;

Tekniğin amacı; Sadece yukarıdan boşluk bırakmanıza olanak sağlar.

İlgili kodlar;

div#padding2 {
padding-top:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
3) Aşağıdan boşluk bırakma tekniği;

Tekniğin amacı; Sadece aşağıdan boşluk bırakmanıza olanak sağlar.

İlgili kodlar;

div#padding3 {
padding-bottom:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
4) Sağ taraftan boşluk bırakma tekniği;

Tekniğin amacı; Sadece sağ taraftan boşluk bırakmanıza olanak sağlar. Eğer ki yazı çok uzun olursa, belirlenen padding değerinden sonra bir alt satıra geçilir.

İlgili kodlar;

div#padding4 {
padding-right:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
5) Sol taraftan boşluk bırakma tekniği;

Tekniğin amacı; Sadece sol taraftan boşluk bırakmanıza olanak sağlar. Eğer ki yazı çok uzun olursa, belirlenen padding değerinden sonra bir alt satıra geçilir.

İlgili kodlar;

div#padding5 {
padding-left:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}