Koja je razlika između block i inline elemenata?

Question

Accepted Answer

Svaki element ima zadanu **display** ponašanje koja kontrolira kako teče u rasporedu. - **Block** elementi počinju na **novoj liniji** i zauzimaju **svu dostupnu širinu**. Prihvataju width/height i sve margins/paddings. Primjeri: `

`, `

`, `
`, `
`. - Inline elementi teku unutar linije, samo tako široki koliko je njihov sadržaj, i ignoriraju width/height i top/bottom margine. Primjeri: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Zašto je važno ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Postavljanje `width`/`height` na inline element ne radi ništa. Rješenje je promijeniti njegov display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — najbolje od oboje `inline-block` sjedi u toku teksta (jedan pored drugoga) i* poštuje width/height/margins — savršeno za stavke navigacije, značke ili gumbe raspoređene u niz. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Zašto je važno Razumijevanje zadanog display-a objašnjava zašto vaš `` neće uzeti visinu, zašto se `
` slažu, i kada trebate prebaciti na `inline-block`, `flex` ili `grid`. To je temelj kako se elementi raspoređuju prije nego što primijenite bilo koji sustav rasporeda.