Apa perbedaan antara elemen block dan inline?

Question

Accepted Answer

Setiap elemen memiliki perilaku **display** bawaan yang mengontrol bagaimana ia mengalir dalam tata letak. - Elemen **block** dimulai pada **baris baru** dan mengambil **seluruh lebar yang tersedia**. Mereka menerima width/height dan semua margins/paddings. Contoh: `

`, `

`, `
`, `
`. - Elemen inline mengalir dalam satu baris, hanya selebar kontennya, dan mengabaikan width/height serta margin atas/bawah. Contoh: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Mengapa ini penting ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Menetapkan `width`/`height` pada elemen inline tidak melakukan apa pun. Solusinya adalah mengubah displaynya: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — yang terbaik dari keduanya `inline-block` duduk di aliran teks (berdampingan) dan* menghormati width/height/margins — sempurna untuk item navigasi, lencana, atau tombol yang disusun dalam baris. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Mengapa ini penting Memahami display bawaan menjelaskan mengapa `` Anda tidak akan mengambil tinggi, mengapa `
` bertumpuk, dan kapan harus beralih ke `inline-block`, `flex`, atau `grid`. Ini adalah fondasi bagaimana elemen mengatur sebelum Anda menerapkan sistem tata letak apa pun.