CSS Dersleri 9 - Padding Kullanımı

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Padding konusunu öğreneceğiz.

CSS "padding" özelliği, etiketlerin iç boşluklarını tanımlar. CSS "padding" ile etiketlerin kenarlarının iç boşluklarını düzenleyebilirsiniz. Etikete ait kenarları tek bir seferde düzenleyebileceğiniz gibi tek tek düzenlemekte mümkündür.

CSS, bir etiketin tüm kenarları için "padding" özelliği sunmaktadır :

• padding-top
• padding-left
• padding-right
• padding-bottom

Bu CSS özelliklerinin alabileceği değerleri şunlardır : 

• uzunluk : px, pt, cm gibi ölçüler
• % - yüzdelik dilim olarak ifade edilebilir
• inherit - padding özelliğini üst etiketten miras alır

CSS "padding" kullanımı :

div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

CSS Padding Kısa Kullanımı

CSS "padding" özelliğininde kısa kullanımları mevcuttur.

div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}

div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}

div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}

div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}

div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}