Üstteki resimde daha iyi anlatabilmek ve anlayabilmek için çizdim burada ki renkler le anlatım yapmaya çalışıcam
12 - Üst 3 - Sağ 6 - Alt 9 - Sol
Renkleri olsunlar diyelimki bir kutumuz var ilk olarak tam kısaltmayı ele alalım
#etiket { padding: 12px 3px 6px 9px; }
bu kodda 4 değer yazdık peki bu yazdığımız değerler hangi yönleri etkiliyor renklere bakınca anlaşılması çok kolay aslında renklerden ziyade yönüde gördüğünüz gibi saat yönünde gidiyor yani saat 12 den başlıyoruz saat 9 da bitiriyoruz
1. değer = ÜST
2. değer = SAĞ
3. değer = ALT
4. değer = SOL
İkinci kısaltmada ise iki değerden oluşuyor şu şekilde
#etiket { padding: 20px 10px; }
bu kısaltmada ise ilk verdiğimiz değer ÜST ve ALT Bölgelerini etkiliyor İkinci Yazdığımız Değer ise SOL veSAĞ Bölgelerini etkiliyor
Birde 3 lü değer var çok nadir kullanılıyor ama ondanda bahsedelim
#etiket { padding: 10px 20px 10px; }
burada ise ilk verdiğimiz değer ÜST bölgeyi ikinci verdiğimiz değer SOL ve SAĞ bölümlerini etkiliyor sonverdiğimiz değer ise ALT bölgeyi etkiliyor.
Bu padding kodu sadece bir örnekti arkadaşlar
bu yön değerleri coğu kodda aynıdır misal padding kodunun yanı sıra margin, border-width gibi kodlarda da aynıdır sıralama değişmez.
