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.


css padding

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:


CSS padding özellik belirtilmemiş parağraf

CSS padding özellik belirtilmiş parağraf

ÇIKTI:

css padding

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

CSS:


.menu{margin-left:80px;}

a{background-color:#ccc;}

HTML:


Menü

Menü

ÇIKTI:

css padding

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:


Menü

Menü

ÇIKTI:

css padding

Adınız

Eposta

Mesaj

4891

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE