Ogni elemento ha un comportamento display predefinito che controlla come fluisce nel layout.
<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 */
Impostare width/height su un elemento inline non fa nulla. La soluzione è cambiarne il display:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
inline-block si inserisce nel flusso di testo (uno accanto all'altro) e rispetta larghezza/altezza/margini — perfetto per voci di navigazione, badge o pulsanti disposti in una riga.
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
Comprendere il display predefinito spiega perché il tuo <span> non accetterà un'altezza, perché i <div> si impilano, e quando passare a inline-block, flex o grid.
È la base di come gli elementi si dispongono prima di applicare qualsiasi sistema di layout.