Svaki element ima zadanu display ponašanje koja kontrolira kako teče u rasporedu.
<div>, <p>, <h1>, <section>, <ul>.<span>, <a>, <strong>, <em>.<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
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:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
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.
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
Razumijevanje zadanog display-a objašnjava zašto vaš <span> neće uzeti visinu, zašto se <div> 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.