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:

Tüm padding komutları:

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:

Ö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:

css padding

Ö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:

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:


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

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

ÇIKTI:

css padding

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7398

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.