Css Padding Kullanımı

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

 Önemli :  Padding değeri, negatif ( – ) değer alamaz.

     ► 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

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link