CSS Padding Nedir ? ve Kullanımı

[Silverday]

Çizdiğim Resim biraz komik oldu sanırım padding kodu resimdeki gibi itme kodumuzdur Misal bir kutumuz yada yada resmimiz veya tablomuz bu nesnelerimizin içten olmak üzere itmeye yarar Burada Yönlerden bahsetmiştim padding kodumuz da sadece yönler vardır ve sadece içe etkilidir yani (-) değer kullanılamaz örnekle devam edelim
Bir Kutumuz olsun ve 4 yönden itelim
Burada Yazımızı 4 Yönden birer santim ittik


Yukarıdaki kutuda border ile yazı arasında kalan kısımlar bizim verdiğimiz değerler
Kullandığımız kod ise şu şekilde

#etiket {padding: 1cm;}

Tabi istediğimiz yönede değer verebiliriz

#etiket {
padding-top: 2px;
padding-left: 4px
padding-right: 4px;
padding-bottom: 2px;
}

Şeklinde yapabiliriz yada kısaltma kullanabilir çok kod yazmak yerine yukarıda aynı değeri kısaltma ile yazalım

#etiket {padding: 2px 4px 2px 4px;}

bu şekilde yukarıda yazdığımız kod bir önceki kodla aynı değerlere sahip ama daha kısa ve pratik
padding kodunu bir çok elementte kullanabiliriz CSS de bildiğiniz gibi fazla kısıtlama yok
Sadece bir yöne değer verebiliriz örnek
Sol dan bir santim ittik

#etiket {padding-left: 1cm;}

Şeklinde değer veririz
Aynı şekilde tek sağ kısım için

#etiket {padding-right: 10cm;}

Aynı şekilde tek üst kısım için

#etiket {padding-top: 10cm;}

Aynı şekilde tek alt kısım için

#etiket {padding-bottom: 10cm;}

ben örneklerde (cm) santimetre olarak değer verdim pixel veya % yüzde kullanabiliriz

#etiket {padding-bottom: 10px;}
#etiket {padding-bottom: 10%;}

Nerelerde Kullanılır ? Kendi Sitemden Örnek Vermek istiyorum
Örnek Yorum Ekle Yazısı soldan 50 pixel itilmiştir ve kalan kısıma ikon yerleştirdim bu sanırım size padding hakkında iyi bir örnek olur

Dikkat etmemiz gereken nelerdir
örnek olarak bir kutumuzu ele alalım ve bu kutumuza genişlik verelim genişliği 300 pisel olsun ve bu kutumuzun içindeki yazıyı 50 pixel soldan itelim örnek
Genişlik 300 Pixel mi ? HAYIR

Örnekte kutumuza 300 pixel genişlik verdik ama birde 50 pixel soldan yazımızı ittik kutumuz büyüdü yani 350 pixel oldu
eğer sağdan bir değer verseydik onuda hesaplamamamız gerekirdi 50 pixelde sağdan değer verirsek kurumuz 400 pixel olurdu
ebatlandırma yaparken buna dikkat etmeliyiz