CSS Kısaltmalarını bir çoğumuz biliyoruz peki bir çoğumuzun bilmediği Kısaltmaların etki yönleri nasıl çalışıyor bunu 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
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.
Anlaşılır bir şekilde anlatmaya çalıştım umarım yarlı olur başka bir konuda görüşmek üzere hoşcakalın
