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ı

Sıradaki ders: Direction ve unicode-bidi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler