1159

Komple Uygulamalı Web Geliştirme Eğitimi | 2019

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 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.

Paylaş