Apa perbedaan antarane elemen blok lan inline?

Question

Accepted Answer

Saben elemen nduweni prilaku **display** baku sing ngontrol carane nggalir ing layout. - Elemen **Block** mulai ing **baris anyar** lan njupuk **jembar sak-jembare sumber daya**. Nang terima jembar/dhuwur lan kabeh margin/padding. Conto: `

`, `

`, `
`, `
`. - Elemen Inline nggalir sajrone baris, mung selebar konten, lan ngibarakake jembar/dhuwur lan margin ndhuwur/ngisor. Conto: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Gotcha praktis ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Menyetel `width`/`height` ing elemen inline ora nggawa apa-apa. Cara ndulakake yaiku ganti displayne: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — sing paling apik saka loro `inline-block` lumaku ing aliran teks (banjur-banjur) lan* ngandhani jembar/dhuwur/margin — sempurna kanggo item navigasi, lencana, utawa tombol sing diarani ing baris. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Mengapa penting Pahami display baku ngjelasake mengapa `` mu ora bakal njupuk dhuwur, mengapa `
` numpuk, lan kapan kudu ngalih menyang `inline-block`, `flex`, utawa `grid`. Ikune fondasi carane elemen njejeran sadurunge ngetrapake sistem layout apa pun.