Kakšna je razlika med blokovnimi in vrstinimi elementi?

Question

Accepted Answer

Vsak element ima privzeto **display** vedenje, ki nadzira, kako se preliva v postavitev. - **Blokni** elementi se začnejo na **novi črti** in zavzamejo **polno razpoložljivo širino**. Sprejmejo širino/višino in vse robove/polnila. Primeri: `

`, `

`, `
`, `
`. - Vrstični elementi se pretakajo znotraj črti, le tako široki kot njihova vsebina, in ignorirajo širino/višino ter zgornje/spodnje robove. Primeri: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Praktična pasti ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Nastavljanje `width`/`height` na vrstinega elementa ne naredi ničesar. Rešitev je spremeniti njegov display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — najbolje obojega `inline-block` se nahaja v tekstovnem toku (drug poleg drugega) in* spoštuje širino/višino/robove – popolno za elemente navigacije, značke ali gumbe, postavljene v vrstico. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Zakaj je to pomembno Razumevanje privzetega display pojasni, zakaj vaš `` ne bo prevzel višine, zakaj se `
`-ovi zlagajo, in kdaj preklopiti na `inline-block`, `flex` ali `grid`. To je temelj, kako se elementi uredijo preden uporabite kateri koli sistem postavitve.