Css Padding - Css Dersleri

[VexraDev]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ 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.