CSS Kısaltmaları Etki Yönü Nerelerdir?

CSS Kısaltmalarını bir çoğumuz biliyoruz peki bir çoğumuzun bilmediği Kısaltmaların etki yönleri nasıl çalışıyor Buna Bakalım
Ü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 ve SAĞ 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.