Css Padding

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"> 
    Komple Uygulamalı Web Geliştirme
</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.

Örnek 1 için tıklayınız.

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">
    Komple Uygulamalı Web Geliştirme
  </div>

  <div id="second" class="box">
    Modern Javascript Kursu
  </div>

  <div id="third" class="box">
    Asp.net Core 2 Mvc Kursu
  </div>

 <div id="forth" class="box">
    Entity Framework Core 2 Mvc Kursu
  </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;
}

Örnek 2 için tıklayınız.

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.

Örnek 3 için tıklayınız.