🚀 HTML Mimarisinde Blok ve Satır İçi (Inline) Ayrımı

HTML elemanlarının tarayıcı üzerindeki yerleşim mantığını, akış kurallarını ve kutu modeli (box model) davranışlarını derinlemesine inceleme.

Selamlar, bugün modern web'in en temel ama en çok kafa karıştıran konularından birine giriyoruz: Elemanların ekrandaki 'fiziksel' varlıkları. Bir HTML etiketi sadece yazı tutmaz, tarayıcıya o yazının etrafındaki dünyayı nasıl yönetmesi gerektiğini söyler.

1. Blok Seviyeli (Block-level) Elemanlar

Bu elemanlar 'bencil' elemanlardır. İçeriği ne kadar küçük olursa olsun, bulunduğu satırı boydan boya kaplarlar (width: 100%). Her zaman yeni bir satırdan başlarlar.

  • Örnekler: <div>, <h1>-<h6>, <p>, <ul>, <header>, <section>.

2. Satır İçi (Inline) Elemanlar

Bunlar 'sosyal' elemanlardır. Sadece içerikleri kadar yer kaplarlar ve yan yana gelmekten çekinmezler.

  • Örnekler: <span>, <a>, <strong>, <img>, <em>.

Ovid Deneyimi: Vaktiyle OvidRacer oyunumuzun arayüzünde (HUD) hız göstergesini yaparken, 'Km/h' birimini hız rakamının hemen yanına sabitlemek için <span> kullanmıştık. Eğer onu yanlışlıkla bir div içine alsaydık, birim bir alt satıra düşecek ve yarışın heyecanını teknik bir hatayla bozacaktı. Tarayıcının akışını anlamak, CSS ile savaşmanızı engeller.

🚀 Sanal Kodlama Alanı Yükleniyor...

Teknik Karşılaştırma ve Sınırlar

Özellik Blok-Seviyeli (Block) Satır İçi (Inline)
Yeni Satır Her zaman yeni satırda başlar. Mevcut satırda devam eder.
Genişlik/Yükseklik width ve height değerlerini kabul eder. Genişlik ve yükseklik atanamaz (içerik kadardır).
Dikey Margin/Padding Üst ve alt boşlukları tam işler. Üst ve alt boşluklar ekrana çizilir ama diğer elemanları itmez.
İç İçe Kullanım Hem blok hem de inline eleman içerebilir. Sadece diğer inline elemanları içermelidir.

Kritik Kural: Bir <span> (inline) içine asla bir <div> (block) koymamalısınız. Tarayıcı bunu render ederken zorlanmaz belki ama doküman hiyerarşisini (DOM) bozmuş olursunuz. Eğer bir satır içi elemana blok özellikleri (genişlik verme gibi) kazandırmak isterseniz, CSS ile display: inline-block; imdadınıza yetişir.

Ovid Game Studio | Teknik Notlar ovidgame.com