--- title: 'Görüntüleme Türleri' source: 'https://academia.sh/tr/kurslar/css-temelleri/goruntuleme-turleri' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:15+00:00' license: 'CC BY-SA 4.0' --- # Görüntüleme Türleri Blok, satır içi ve satır içi blok kutuların davranış farkları; dış ve iç görüntüleme türü ayrımı ve gizlemenin üç ayrı yolu. Önceki iki derste kutuların ölçüleri hesaplandı ama kutunun **ne tür** bir kutu olduğu sorulmadı. Bir paragraf neden kendi satırını kaplar da içindeki vurgu ögesi metnin akışında kalır? İkisine de `width: 200px` yazıldığında neden yalnızca biri değişir? Fark `display` özelliğinden gelir. Bu ders üç temel türü — blok, satır içi ve satır içi blok — dört ölçüt üzerinden karşılaştırır ve gizlemenin ayrı bir mesele olduğunu gösterir. ## Üç Tür, Dört Ölçüt ```js // goruntuleme.mjs — display degerinin hangi ozellikleri etkilediğini cizelgeler const TURLER = { "block": { satirKaplar: true, widthUygulanir: true, dikeyBosluk: true, aralikDuyarli: false }, "inline": { satirKaplar: false, widthUygulanir: false, dikeyBosluk: false, aralikDuyarli: true }, "inline-block": { satirKaplar: false, widthUygulanir: true, dikeyBosluk: true, aralikDuyarli: true }, "none": { satirKaplar: false, widthUygulanir: false, dikeyBosluk: false, aralikDuyarli: false }, }; const basliklar = ["display", "kendi satiri", "width/height", "dikey margin", "bosluga duyarli"]; console.log(basliklar.map((b, i) => b.padEnd(i === 0 ? 14 : 16)).join("")); for (const [ad, o] of Object.entries(TURLER)) { const e = (v) => (v ? "evet" : "hayir").padEnd(16); console.log(ad.padEnd(14) + e(o.satirKaplar) + e(o.widthUygulanir) + e(o.dikeyBosluk) + e(o.aralikDuyarli)); } // satir ici kutularin yan yana dizilmesi: aradaki bosluk karakteri de bir kutudur console.log("\n--- satir ici dizilim (bosluk karakteri dahil) ---"); const parcalar = [ { tur: "inline-block", en: 80 }, { tur: "bosluk", en: 4 }, { tur: "inline-block", en: 80 }, { tur: "bosluk", en: 4 }, { tur: "inline-block", en: 80 }, ]; let x = 0; for (const p of parcalar) { console.log(`${String(x).padStart(4)} .. ${x + p.en} ${p.tur}`); x += p.en; } console.log(`toplam satir eni: ${x} (kutular: ${80 * 3}, bosluklar: ${x - 240})`); ``` ``` display kendi satiri width/height dikey margin bosluga duyarli block evet evet evet hayir inline hayir hayir hayir evet inline-block hayir evet evet evet none hayir hayir hayir hayir --- satir ici dizilim (bosluk karakteri dahil) --- 0 .. 80 inline-block 80 .. 84 bosluk 84 .. 164 inline-block 164 .. 168 bosluk 168 .. 248 inline-block toplam satir eni: 248 (kutular: 240, bosluklar: 8) ``` Çizelge, önceki dersteki soruların yanıtını veriyor. **Blok kutu (block box)** kapsayan kutunun satır içi eksenini baştan sona doldurur ve kendinden sonrakini alt satıra iter. `width` ve `height` uygulanır; dört kenardaki dış boşluk da uygulanır. Paragraf, başlık, bölüm ve liste bu türdendir. **Satır içi kutu (inline box)** metnin akışında kalır ve yalnızca içeriği kadar yer kaplar. `width` ve `height` bildirimlerinin **hiçbir etkisi yoktur**; kutunun ölçüsü içeriğinden gelir. Dikey dış boşluk da yok sayılır. Vurgu, bağlantı, kısaltma ve genel amaçlı `span` bu türdendir. Bir uyarı gerekir: satır içi kutuda yatay iç boşluk ve kenarlık **uygulanır** ama çizilen alan satır yüksekliğini büyütmez. Bir bağlantıya dikey iç boşluk verildiğinde renkli alan büyür, satırlar arasındaki mesafe değişmez ve alanlar üst üste binebilir. **Satır içi blok kutu (inline-block box)** ikisinin arasındadır: dışarıdan satır içi gibi davranır — kendi satırını kaplamaz, komşularıyla yan yana durur — ama içeriden bir blok kutudur; `width`, `height` ve dört kenar dış boşluğu uygulanır. ## Satır İçi Dizilimde Boşluk Karakteri Sayılır Çıktının ikinci bölümü sık karşılaşılan bir sorunu gösteriyor. Üç adet 80 birimlik satır içi blok kutu yan yana konduğunda toplam satır eni 240 değil 248 çıktı. Aradaki 8 birim, kaynak metinde kutuların **arasındaki boşluk karakterlerinden** gelir. Sebep, satır içi düzenin metin düzeni olmasıdır. Kaynak metindeki satır sonları ve boşluklar birer boşluk karakterine indirgenir ve bu karakter de yer kaplar. Genişliği yazı tipine bağlıdır; buradaki 4 birim örnek bir değerdir. Sonuç, üç kutuya `width: 33.333%` verildiğinde bir satıra sığmamalarıdır — boşluklar eklenince toplam yüzde yüzü aşar. Bu, satır içi blok ile ızgara benzeri düzenler kurmanın kırılgan yanıdır ve bir sonraki kurstaki düzen sistemlerinde ortadan kalkar; o modellerde kutular arasındaki metin düğümleri yerleşime katılmaz. ## Dış ve İç Görüntüleme Türü `display` özelliği tek bir şey değil, iki şey birden söyler. **Dış görüntüleme türü (outer display type)** kutunun *kapsayıcısında* nasıl davranacağını belirler: `block` ya da `inline`. **İç görüntüleme türü (inner display type)** kutunun *çocuklarını* nasıl dizeceğini belirler: `flow`, `flow-root`, `flex`, `grid`, `table`. İki değerli yazımda ikisi ayrı ayrı verilir: ```css .gezinme { display: block flex; } ``` Tek değerli eski yazımlar bu ikilinin kısaltmalarıdır: `block` sözcüğü `block flow`, `inline-block` sözcüğü `inline flow-root`, `flex` sözcüğü `block flex` anlamına gelir. Bu ayrım, `inline-block` türünün neden "içeriden blok, dışarıdan satır içi" diye tarif edildiğini açıklar — sözcük gerçekten iki parçadan oluşur. `flow-root` değeri ayrıca anılmalıdır: kutuyu, çocuklarının akışını kendi içinde tamamlayan bağımsız bir kök yapar. Bunun ne işe yaradığını kayan öğeler dersinde göreceğiz. ## Türü Değiştirmek Anlamı Değiştirmez Bir ögenin görüntüleme türü tarayıcının varsayılan biçem dosyasından gelir ve bir bildirimle değiştirilebilir. `li { display: inline; }` yazmak liste maddelerini yan yana dizer. Değişen yalnızca yerleşimdir. Belgedeki anlam — bunun bir liste maddesi olduğu — yerinde kalır ve belge ağacını okuyan programlar onu görmeye devam eder. Bu, Web'in Temelleri ve HTML kursunda kurulan yapı–sunum ayrımının doğrudan sonucudur: bir başlığı satır içi yapmak onu başlık olmaktan çıkarmaz. Tersi de doğrudur ve bir uyarı içerir: bir ögeyi görsel olarak başka bir şeye benzetmek onu o şey yapmaz. Bir `div` ögesine düğme görünümü vermek, klavyeyle odaklanabilir ve etkinleştirilebilir bir düğme üretmez. Görünüm biçemin, davranış ve anlam işaretlemenin işidir. ## Gizlemenin Üç Yolu `display: none` çizelgede dördüncü satırdaydı ve bütün ölçütlerde "hayır" veriyordu. Bunun sebebi, bu değerin kutu **üretmemesidir**. Öge belge ağacında durur ama yerleşime hiç katılmaz. Üç ayrı gizleme yolu vardır ve sonuçları farklıdır: | Yazım | Kutu üretir mi | Yer kaplar mı | Yardımcı teknolojiye görünür mü | |---|---|---|---| | `display: none` | Hayır | Hayır | Hayır | | `visibility: hidden` | Evet | Evet | Hayır | | `opacity: 0` | Evet | Evet | Evet | Üçüncü satır dikkat ister: saydamlığı sıfırlanmış bir öge görünmez ama hâlâ oradadır — odaklanabilir, tıklanabilir ve ekran okuyucuya okunur. Bir şeyi kullanıcıdan gizlemek için `opacity: 0` yazmak, onu erişilebilirlik ağacından kaldırmaz. Dördüncü bir durum daha vardır: bir metni **görsel olarak** gizleyip yardımcı teknolojiye bırakmak. Bu, `display: none` ile yapılamaz; ögeyi bir piksellik bir alana kırpan bir kural grubuyla yapılır ve genellikle `.gorsel-gizli` gibi bir yardımcı sınıfla adlandırılır. ## İstasyon Sayfasında Türler ```css /* istasyon.css — 10. adım: görüntüleme türleri */ .gezinme li { display: inline-block; margin-inline-end: 12px; } .olcum-cizelgesi caption { display: table-caption; text-align: start; } .durum-rozeti { display: inline-block; padding-block: 2px; padding-inline: 8px; border-radius: 4px; } .gorsel-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } ``` `.durum-rozeti` sınıfı satır içi blok olarak tanımlandı çünkü iki şeyi birden istiyor: metnin akışında kalmak ve dikey iç boşluk alabilmek. Satır içi olsaydı iç boşluk çizilir ama satır yüksekliğini büyütmezdi; blok olsaydı kendi satırına inerdi. `.gorsel-gizli` sınıfı yukarıdaki dördüncü durumu gerçekleştirir: kutu üretilir, bir piksellik bir alana kırpılır ve erişilebilirlik ağacında kalır. Ölçüm çizelgesinde birimleri görsel olarak sütun başlığında bir kez yazıp her hücrede yardımcı teknolojiye tekrarlamak için kullanılır. ## Özet - Blok kutu kapsayanının satır içi eksenini doldurur ve kendi satırını kaplar; `width`, `height` ve dört kenar dış boşluğu uygulanır. - Satır içi kutu metnin akışında kalır; `width`, `height` ve dikey dış boşluk uygulanmaz, yatay iç boşluk ve kenarlık çizilir ama satır yüksekliğini büyütmez. - Satır içi blok kutu dışarıdan satır içi, içeriden bloktur; yan yana dizilir ama ölçü ve boşluk bildirimlerini alır. - Satır içi dizilimde kaynak metindeki boşluk karakterleri de yer kaplar; bu, yan yana dizilen kutuların toplamının beklenenden geniş çıkmasının sebebidir. - Gizlemenin üç yolu farklı sonuç verir: `display: none` kutu üretmez, `visibility: hidden` yer kaplar, `opacity: 0` ise erişilebilirlik ağacında kalır ve etkileşime açıktır. ## Sonraki Adım Bu ders kutuların türünü tanımladı ama nasıl dizildiklerini ayrıntısıyla anlatmadı. Blok kutular neden yukarıdan aşağı yığılır, satır içi kutular hangi kurala göre satırlara bölünür, iki blok kutu arasındaki dış boşluk neden ikisinin toplamı değildir? Sonraki ders normal akışın kurallarını tanımlar ve dış boşluk çökmesini sayıyla hesaplar.