Css Padding - Css Dersleri

[VexraDev]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Css padding nedir ve nasıl kullanılır? css padding için top,right,bottom ve left nasıl kullanılır?

Css padding nedir ve nasıl kullanılır? css padding için top, right, bottom ve left nasıl kullanılır?
Css padding ile nesnelerin etrafında bulunan kenarlık ile arasındaki mesafeyi ayarlayabiliyoruz.

<div class="box"> 
    Css Dersleri
</div>

.box{ 
  width:250px;
  background-color:red;
  padding:20px;
}

Örneğimizde padding:20px diyerek kutunun ekrafındaki kenarlık ile arasındaki mesafeyi arttırmış oluyoruz ki; burada artan değerden dolayı kutunun büyüdüğüne dikkat ediniz.

Padding değerlerini farklı yöntemlerle belirtebiliriz.
** padding : top right bottom left; => şeklinde 4 köşeden padding değerlerini tek tek belirleyebiliriz.
** padding : top-bottom right-left; => iki değer şeklinde bir kullanım yapabiliriz.
Örneğin; padding:10px 20px; demekle üst-alt için 10px ve sağ-sol için ise 20px' lik bir boşluk bırakmış oluruz.
** padding : top-right-bottom-left; => şeklinde 4 köşe için tek bir değer kullanımı da yapabiliriz.
Örneğin; padding: 10px; dediğimizde 4 köşe için 10px padding değeri vermiş oluruz.

<div id="first" class="box">
     Css Dersleri
  </div>

  <div id="second" class="box">
    Css Dersleri 2
  </div>

  <div id="third" class="box">
    Css Dersleri 3
  </div>

<div id="forth" class="box">
     Css Dersleri 4
  </div>

.box{ 
  width:270px;
  background-color:red;  
  float:left;
  margin-left:10px;
}

#first{
  padding-left:20px;
}
#second{
  padding-right:20px;
}
#third{
  padding-top:20px;
}
#forth{
  padding-bottom:20px;
}

Linkler için padding değerlerini kullanabiliriz.

<div>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

div{
  margin:20px;
}

a{
  background-color:red;
  color:#fff;
  padding:10px;
  text-decoration:none;
}

Bu durumda her bir link için eklediğimiz arka plan zeminlerine dikkat ediniz. Link içindeki yazıların kenarlık ile arasındaki mesafeleri padding ile arttı ve bir buton görünümüne sahip oldular.