CSS PADDING ÖZELLİKLERİ

Merhaba..

CSS'in sayfadaki tüm elemanları bir kutu gibi gördüğünden daha önce bahsetmiştim Kutular için bir çok özellik tanımlanabiliyor. Elemanın kenarları ile içindekiler arasındaki boşluk miktarlarını ayarlamamızı sağlayan PADDING özelliğide bunlardan biridir.

PADDING

Bir elemanın iç boşluklarıdır. Yada yukarıda beliritildiği igibi , elamanın kenarları ile içindekiler arasındaki mesafelerdir. Css ile bu boşluklar tümden PADDING özelliği ile  tanımlanabileceği gibi , 

• PADDING (tüm kenar iç boşlukları)
• PADDING -TOP (üst kenar iç  boşluğu)
• PADDING -RIGHT (sağ kenar iç  boşluğu)
• PADDING-BOTTOM (alt kenar iç  boşluğu)
• PADDING -LEFT  (sol kenar iç  boşluğu)       

şeklinde ayrı ayrı da tanımlanabilir..

GENEL KULLANIM

.icerik {

   padding:50px;   //  tüm kenar iç boşluğu  50 px olur..

   padding-top:50px;   //  üst kenar iç boşluğu50 px olur..
   padding-right:50px;   //  sağ kenar iç boşluğu50 px olur..
   padding-bottom:50px;   // alt kenar iç boşluğu50 px olur..
   padding-left:50px;   //  sol kenar iç boşluğu 50 px olur..

}

EKRAN

Yukarıdaki .kutu classlı (turuncu)  DIV'in  tüm iç kenarlarında 50px boşluk bırakır.  Yani turuncu div içeriği , turuncu div kenarlarından 50px mesafeli olur.   Turuncu div'in  belirli bir genişliği olduğundan , içerik kutusu ile sağ kenar arasındaki padding boşluğu tanımlanan değere göre ayarlanamz...

PADDING KISALTMALARI

Padding değerleri farklı kenarlar için verilirken , yukarıda tanımlandığı gibi , ayrı ayrı yazıılabileceği gibi , kısaltmalarlada belirtilebilir..

4'LÜ GÖSTERİM

Padding ile tüm kenar iç  boşuklarını aynı anda yazılabilir. Bunun için saat yönü sıralaması kullanılır:

1. değer üst

2. değer sağ

3. değer alt

4. değer sol 

iç boşlukları ayarlar..

div { 

  padding: 15px 20px 25px 30px;

  // Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.
  padding-top:15px;
  padding-right:20px;
  padding-bottom:25px;
  padding-left:30px;

}

Yukarıdaki tanımlamaya göre , belirtilen div'in üst kenar  iç boşluğu 15 , sağ kenar iç  boşluğu 20 , alt kenar iç  boşluğu 25 , sol kenar iç  boşluğuda 30px olur: 

3'LÜ GÖSTERİM

PAdding ile 3lü tanımlamada yine saat yönü sıralaması kullanılır: Ancak 4'lü gösterimden farklı olarak  2. değer hem sol hem sağ kenar iç boşluğunu ayarlar..

1. değer üst

2. değer sol ve sağ

3. değer alt

boşlukları ayarlar..

div { 

  padding: 15px 20px 25px;

  // Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.

  padding-top:15px;
  padding-right:20px;
  padding-bottom:25px;
  padding-left: 20px  
 
}

Yukarıdaki tanımlamaya göre , belirtilen div'in üst kenar iç  boşluğu 15 ,  sağ ve sol kenar iç boşlukları 20px , alt kenar iç  boşluğu 25px  olur.. 

2'Lİ  GÖSTERİM

Padding ile 2'li tanımlamada ilk değer üst ve alt boşluğu ayarlarken, ikinci değer sol ve sağ iç boşluğu ayarlar..

1. değer üst ve alt 

2. değer sol ve sağ

boşlukları ayarlar..

div { 

  padding: 15px 20px;

  // Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.

  padding-top:15px;  padding-bottom:15px;
  padding-left: 20px;  padding-right:20px;

}

Yukarıdaki tanımlamaya göre , belirtilen div'in üst ve alt kenar iç boşluğu 15 ,  sağ ve sol kenar iç  boşlukları 20px   olur.. 

Görüşmek Üzere...