CSS PADDÄ°NG NEDÄ°R, KULLANIMI NASILDIR?

Padding özelliği, elementin içeriği ile kenarlığı arasındaki dolgu genişliğini belirler. CSS padding özelliği, bir elemanın her tarafta gerekli dolgu alanı ayarlar. Dolgu alanı, eleman ve sınır içeriği arasındaki boşluktur. Negatif değerlere izin verilmez.

Dolgu elemanın (sınırı içinde) içerik etrafında bir alanı silinir. Dolgu verilen elementin arka plan rengi verildiğinde, verilen rengi alır.

AlabileceÄŸi deÄŸerler:

• Uzunluk- piksel,em,punto,santimetre olarak boÅŸluk belirtme
• % - İçerik geniÅŸliÄŸine göre yüzdeli olarak dolgu belitme

Tüm padding komutları:

• padding - Hızlı kullanım
• padding-top - Ãœstten boÅŸluk
• padding-right - SaÄŸdan boÅŸluk
• padding-bottom - Alttan boÅŸluk
• padding-left - Soldan boÅŸluk

CSS Çoklu İç Kenar Boşluğu Kullanımı - Padding Individual Sides

CSS, bir elementin farklı tarafları için farklı kenar dolguları belirtmek mümkündür.

CSS:

p {
    padding-top: 25px;

    padding-right: 50px;

    padding-bottom: 25px;

    padding-left: 50px;
  }

CSS İç Kenar Boşluğu Kısa Yazım - Padding Shorthand Property

Sadece padding kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi (üstten başlayarak saat yönünde) sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:

• padding: 25px 50px 75px 100px; (üst 25 piksel, saÄŸ 50 piksel, alt 75 piksel, sol 100 piksel olur.)
• padding: 25px 50px 75px; (üst 25 piksel, saÄŸ ve sol 50 piksel, alt 75 piksel olur.)
• padding: 25px 50px; (üst ve alt 25 piksel, saÄŸ ve sol 50 piksel olur.)
• padding: 25px; (Tüm iç kenar boÅŸlukları 25 piksel olur.)

Örnek:css padding özelliğini parağraflarda gösterelim.

CSS:

p {
    background-color: yellow;
  }

p.padding {
    padding-top: 25px;

    padding-right: 50px;

    padding-bottom: 25px;

    padding-left: 50px;
}

HTML:

<p>CSS padding özellik belirtilmemiş parağraf</p>

<p class="padding">CSS padding özellik belirtilmiş parağraf</p>

ÇIKTI:

Örnek:Link bağlantı oluşturalım arkaplan rengi verelim.

CSS:

.menu{margin-left:80px;}

a{background-color:#ccc;}

HTML:

<a href="">Menü6lt;/a>

<a class="menu" href="">Menü</a>

ÇIKTI:

Yukarıda görüldüğü gibi background rengi yazının alanı kadar yer aldı; bunu gerçek menü boyu haline getirelim bunun için her tarafından padding(dolgu) verelim.

CSS:

.menu{margin-left:80px;}

a{background-color:#ccc;

  padding:10px;
 }

HTML:

<a href="">Menü</a>

<a class="menu" href="">Menü</a>

ÇIKTI: