Block ve inline öğeler arasındaki fark nedir?

Question

Accepted Answer

Her öğe, düzende nasıl aktığını kontrol eden varsayılan **display** davranışına sahiptir. - **Block** öğeler **yeni bir satırda** başlar ve **mevcut tüm genişliği** kaplar. Genişlik/yükseklik ve tüm kenar boşlukları/dolguları kabul ederler. Örnekler: `

`, `

`, `
`, `
`. - Inline öğeler bir satır içinde akar, yalnızca içeriklerinin genişliği kadar geniştir ve genişlik/yükseklik ile üst/alt kenar boşluklarını göz ardı ederler. Örnekler: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Pratik bir sorun ```css 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: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — her iki dünyanın en iyisi `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. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Neden önemli Varsayılan display davranışını anlamak, ``'ınızın neden yükseklik almadığını, `
`'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.