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)

Sıradaki ders: Inset özelliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler