Apakah perbedaan antara elemen blok dan inline?

Question

Accepted Answer

Setiap elemen memiliki perilaku **display** lalai yang mengawal bagaimana ia mengalir dalam tata letak. - Elemen **Block** mulai pada **baris baru** dan mengambil **lebar penuh yang tersedia**. Mereka menerima lebar/tinggi dan semua margin/padding. Contoh: `

`, `

`, `
`, `
`. - Elemen Inline mengalir dalam baris, hanya selebar konten mereka, dan mengabaikan lebar/tinggi dan margin atas/bawah. Contoh: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Perangkap praktis ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Menetapkan `width`/`height` pada elemen inline tidak melakukan apa pun. Perbaikannya adalah mengubah displaynya: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — yang terbaik dari keduanya `inline-block` duduk dalam aliran teks (berdampingan) dan* menghormati lebar/tinggi/margin — sempurna untuk item navigasi, lencana, atau tombol yang ditata dalam satu 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 lalai menjelaskan mengapa `` Anda tidak akan mengambil tinggi, mengapa `
` menumpuk, dan kapan beralih ke `inline-block`, `flex`, atau `grid`. Ini adalah fondasi dari bagaimana elemen disusun sebelum Anda menerapkan sistem tata letak apa pun.