Elementi di blocco vs inline: le differenze fondamentali

Ogni elemento di una pagina occupa lo spazio in uno di due modi: come blocco o come inline. Capire questa differenza è la base per controllare il layout. Un dettaglio importante: storicamente l'HTML divideva gli elementi in «di blocco» e «inline», ma oggi questo comportamento è gestito dal CSS, tramite la proprietà display. Ogni elemento ha un valore predefinito: <div>, <p>, <h1> sono di blocco; <span>, <a>, <strong> sono inline.

Come si comportano nel flow

Il normal flow (flusso normale) è la disposizione predefinita degli elementi, prima di qualsiasi modifica al layout:

• Blocco: inizia su una nuova riga, si prende tutta la larghezza disponibile del contenitore, e i blocchi si impilano uno sotto l'altro.
• Inline: non va a capo: scorre in orizzontale insieme al testo, occupa solo lo spazio del suo contenuto e, quando la riga finisce, prosegue su quella successiva.

<!-- Blocchi: si impilano in verticale -->
<div>Primo blocco</div>
<div>Secondo blocco</div>

<!-- Inline: scorrono sulla stessa riga -->
<span>uno</span> <span>due</span> <span>tre</span>

Fonte: MDN Web Docs: CSS flow layout / Block and inline layout in normal flow

Cosa puoi (e non puoi) fare: le differenze pratiche

La distinzione non è solo «vanno a capo o no»: cambia anche cosa il CSS ti permette di fare su di loro.

Serve una via di mezzo? Esiste display: inline-block: l'elemento resta in linea col testo, ma rispetta larghezza e altezza come un blocco, utile ad esempio per i pulsanti.

Fonte: MDN Web Docs: proprietà «display»

div e span: i due contenitori «neutri»

• <div>: contenitore generico di blocco, senza alcun significato semantico. Serve a raggruppare sezioni di contenuto per dar loro uno stile o un layout.
• <span>: contenitore generico inline. Serve a «circondare» una porzione di testo dentro una frase, per stilizzarla o agganciarla via CSS/JS.

<!-- div: raggruppa un blocco di contenuto -->
<div class="scheda-prodotto"> ... </div>

<!-- span: stilizza una parte di testo dentro una frase -->
<p>Prezzo: <span class="prezzo">19 €</span> (IVA inclusa)</p>

Regola d'oro (indicata da MDN): usali come ultima risorsa, quando nessun elemento semantico più adatto (come <section>, <article>, <em>, <strong>) descrive meglio il contenuto.

Fonte: MDN Web Docs: elementi «<div>» e «<span>»

Il contesto di formattazione

Ogni elemento vive dentro un contesto di formattazione: un'area con regole precise su come disporre il proprio contenuto. Ne bastano due per iniziare:

• Contesto a blocchi: un contenitore dispone i suoi figli-blocco uno sotto l'altro, in verticale.
• Contesto inline: dentro una riga di testo, gli elementi inline vengono messi in fila orizzontale in «righe» (line box); quando la riga è piena, si passa alla successiva.

Questo concetto diventerà potente più avanti (float, flex, grid creano contesti propri), ma il succo per ora è semplice: blocco = impilamento verticale, inline = fila orizzontale che va a capo.

Fonte: MDN Web Docs: Introduction to formatting contexts; W3C: CSS Display Module Level 3

Conclusione

Blocco e inline sono i due modi base in cui gli elementi occupano lo spazio: i primi si impilano in verticale e riempiono la riga, i secondi scorrono in orizzontale col testo. <div> e <span> ne sono i rappresentanti «neutri». Ricorda che oggi questo comportamento è deciso dal CSS (display): puoi sempre usare l'elemento HTML più corretto dal punto di vista del significato e poi decidere con il CSS come mostrarlo.

Riferimenti ufficiali

• MDN: Block-level content (glossario): developer.mozilla.org/en-US/docs/Glossary/Block-level_content
• MDN: Inline-level content (glossario): developer.mozilla.org/en-US/docs/Glossary/Inline-level_content
• MDN: Block and inline layout in normal flow: developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow
• MDN: Introduction to formatting contexts: developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts
• W3C: CSS Display Module Level 3: w3.org/TR/css-display-3/