Logical properties
margin-inline, padding-block gibi mantıksal özellikleri öğrenirsin.
Mantıksal özellikler nedir?
Mantıksal özellikler (logical properties), fiziksel yönler yerine metnin akış eksenlerine göre çalışır. margin-left her zaman sol kenara boşluk koyar; margin-inline-start ise metnin başladığı kenara boşluk koyar.
Bu ayrım, sayfa direction: rtl ya da writing-mode: vertical-rl olduğunda önem kazanır. Mantıksal bildirimler yön değişse bile doğru konuma uygulanır; tek biçimde yazarsın, iki kez tasarlamazsın.
margin-inline-start ve -end
margin-inline-start, satır içi eksen boyunca metnin başladığı kenara boşluk koyar. Türkçe gibi soldan sağa dillerde bu sol kenardır; Arapça gibi sağdan sola dillerde sağ kenar olur. Aynı biçimde yazarsın, yön değişince yer değiştirir.
margin-inline-end ise satırın bittiği kenara boşluk koyar. İkisini birlikte kısaltmak için margin-inline yazabilirsin: tek değer her iki kenara, iki değer sırayla baş ve son kenara uygulanır.
margin-inline ve padding-block kısaltması
margin-inline ve padding-block kısaltmadır. margin-inline: 1rem 2rem yazarsan satır başı 1rem, satır sonu 2rem olur. padding-block: 1rem yazarsan block ekseninin iki kenarına da 1rem uygulanır.
Değer sırası fiziksel karşılıklara göre değil, eksenlere göredir. Bu yüzden tasarımcı daha az şeyle daha çok iş yapar; yön değişse de aynı dosya çalışır.
Uygulama RTL dostu kart kenar boşluğu
.card seçicisi için margin-inline bildirimini yaz. Değer olarak 1rem 2rem ver; satır başı 1rem, satır sonu 2rem olsun. Aynı blokta padding-block: 1.5rem da tanımlansın.
Örnek çözümü göster
/* kart kenar boşluğu yön bağımsız olsun */
.card {
margin-inline: 1rem 2rem;
padding-block: 1.5rem;
}Kendini test et
-
Hangisi mantıksal (logical) bir özelliktir?
- margin-left
- padding-top
- margin-inline-start
- left: 10px
Cevabı göster
margin-inline-start — Doğru. margin-inline-start mantıksaldır; metnin başladığı kenara boşluk koyar.
-
Block ekseninde dolgu
.card { ____: 2rem; }Cevabı göster
.card { padding-block: 2rem; } -
Fiziksel özelliği mantıksal karşılığına eşle
- margin-left (LTR)
- margin-inline-start (LTR)
- margin-right (LTR)
- margin-inline-end (LTR)
- padding-top (TB)
- padding-block-start (TB)
- padding-bottom (TB)
- padding-block-end (TB)