Her öğe, düzende nasıl aktığını kontrol eden varsayılan display davranışına sahiptir.
<div>, <p>, <h1>, <section>, <ul>.<span>, <a>, <strong>, <em>.<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
span { width: 200px; height: 50px; } /* ❌ ignored — span is inline */
Inline bir öğeye width/height ayarlamak hiçbir şey yapmaz. Çözüm, display özelliğini değiştirmektir:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
inline-block, metin akışında (yan yana) oturur ve genişlik/yükseklik/kenar boşluklarına saygı gösterir – navigasyon öğeleri, rozetler veya bir satırda düzenlenmiş düğmeler için mükemmeldir.
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
Varsayılan display davranışını anlamak, <span>'ınızın neden yükseklik almadığını, <div>'lerin neden yığıldığını ve inline-block, flex veya grid'e ne zaman geçileceğini açıklar.
Herhangi bir düzen sistemini uygulamadan önce öğelerin nasıl düzenlendiğinin temelini oluşturur.