Block ve inline
block ve inline eksen kavramlarını öğrenirsin.
block ve inline eksen nedir?
CSS mantıksal modeli iki eksen tanımlar: block ekseni, metnin yeni satıra geçtiği yöndür; inline ekseni ise metnin aynı satırda ilerlediği yöndür.
horizontal-tb modunda block ekseni dikey (yukarıdan aşağı), inline ekseni yataydır (soldan sağa ya da sağdan sola). vertical-rl modunda block ekseni yatay (sağdan sola), inline ekseni dikey olur. Eksenler, yön değil dizilim biçimidir.
Block boyunca ve inline boyunca
Block ekseninde uzaklık için margin-block, padding-block ve inset-block kullanılır. Inline ekseninde ise margin-inline, padding-inline ve inset-inline vardır.
Bu adlar eksenlere göre belirlenir; fiziksel 'üst' ya da 'sol' demek yerine 'block başı' ya da 'inline başı' dersin. Yazım modu değiştiğinde hangi fiziksel kenara denk geldikleri otomatik uyum sağlar.
Eksenleri kullanmak
Eksen tabanlı bildirimler yazmak, çok dilli ve çok yönlü sayfalarda tutarlılık verir. Tek bir .card sınıfı hem Türkçe hem Arapça hem Japonca düzende aynı görünür.
Bunu başarmak için fiziksel top, right, bottom, left yerine mantıksal karşılıklarını kullan. text-align: start da aynı mantıkla çalışır; yazım yönüne göre hizalar.
Uygulama Eksen bazlı kenar boşlukları
.quote seçicisi için iki bildirim yaz: margin-block: 2rem ve margin-inline: 1rem. Her iki bildirim de aynı blokta olsun.
Örnek çözümü göster
/* eksen bazlı kenar boşlukları */
.quote {
margin-block: 2rem;
margin-inline: 1rem;
}Kendini test et
-
horizontal-tb modunda block ekseni hangisidir?
- Yatay, soldan sağa
- Yatay, sağdan sola
- Çapraz
- Dikey, yukarıdan aşağı
Cevabı göster
Dikey, yukarıdan aşağı — Doğru. horizontal-tb modunda block ekseni yukarıdan aşağıdır.
-
Satır içi eksen boşluğu
.row { ____: 1rem; }Cevabı göster
.row { margin-inline: 1rem; } -
Eksen adını anlamına eşle
- Block ekseni
- Yeni satır yönü
- Inline ekseni
- Aynı satır yönü
- margin-block-start
- Block başı kenarı
- margin-inline-end
- Satır sonu kenarı