Css Padding Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te padding özelliğini öğreneceğiz.Padding özelliği ile html etiketlerine iç boşluklar verebiliriz.Padding değeri verirken bunu 3 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.

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

css-dersleri-padding-kullanimi-1

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.

css-dersleri-padding-kullanimi-2

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.

css-dersleri-padding-kullanimi-3

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.

css-dersleri-padding-kullanimi-4

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 6 – Margin Kullanımı

Sonraki : Css Dersleri 8 – Width, Height, Max-Width, Max-Height, Min-Width, Min-Height Kullanımı

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +