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;
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla