Bu yazımda Css’te padding özelliğini öğreneceğiz. Padding özelliği ile Html etiketlerine iç boşluklar verebiliriz. Padding değeri verirken bunu 4 farklı yol ile yapabiliriz. Bunlar:
1 – length ( padding:10px; ) : px, pt, cm vb.. bir değer verebiliriz.
2 – % ( padding:20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz.
3 – inherit ( padding:inherit; ) : inherit değeri verirsek, ebeveyn etiketinin padding değeri ne ise onu miras alır ve aynı değer uygulanır.
Önemli : Padding değeri, negatif ( – ) değer alamaz.
Bu değerleri padding özelliğine verirsek, etiketin 4 tarafınada (yukarı, sağ, aşağı, sol ) iç boşluk vermiş oluruz.Eğer sadece bir tarafına vermek istersek şu özellikleride kullanabiliriz :
► padding-top
► padding-right
► padding-bottom
► padding-left
Padding özelliği 1, 2, 3 veya 4 değer alabilir.Şimdi bir <div> etiketi tanımlayalım ve padding değerleri vererek sonuçlarını inceleyelim.
1 – padding: 80px; => Bu şekilde tek değer verilirse etiketin her yanına (yukarı, sağ, aşağı, sol ) 80px iç boşluk değeri uygulanır.
2 – padding: 60px 100px; => Bu şekilde 2 değer verilirse etiketin,
yukarı ve aşağı iç boşluk değeri = 60px
sağ ve sol iç boşluk değeri = 100px olarak uygulanır.
3 – padding: 60px 80px 100px; => Bu şekilde 3 değer verilirse etiketin,
yukarı iç boşluk değeri = 60px
sağ ve sol iç boşluk değeri = 80px
aşağı iç boşluk değeri = 100px olarak uygulanır.
4 – padding: 60px 80px 100px 120px; => Bu şekilde 4 değer verilirse etiketin,
yukarı iç boşluk değeri = 60px
sağ iç boşluk değeri = 80px
aşağı iç boşluk değeri = 100px
sol iç boşluk değeri = 120px olarak uygulanır.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
