Padding Ozellikleri

Ç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







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

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

#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

Ö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
Peki Neden Kullanmalıyız ?
Padding kodumuzun tasarımda yeri önemlidir örnekle devam etmek istiyorum daha iyi anlamak için

yukarıdaki kutumuzda hiç padding vermedik borderle yazılarımız bir birine çok yakın durdular görünüm açısından hoş olmayan bir durum tabiki aynı kutuyu padding vererek görelim

Sizce hangisi daha okunaklı veya göze hoş görünüyor elbette bu bir örnek arkadaşlar sitemizin genel yapısında her yerinde herşeyin bir birine yapışık bir durumda olması hiçte hoş gözükmezdi
elimden geldiğin ce padding konu anlatmaya çalıştım umarım yararlı olmuştur