Block, inline e inline-block

La proprietà display è una delle più fondamentali del CSS. Determina il modo in cui un elemento partecipa al flusso del layout: stabilisce se crea un riquadro a livello di blocco, un riquadro inline o una soluzione intermedia.

Gli elementi block iniziano su una nuova riga e si estendono fino a occupare l'intera larghezza del contenitore. È possibile impostare width, height, margin e padding su tutti i lati.

Elementi block predefiniti: div, p, h1-h6, section, article.

Gli elementi inline fluiscono all'interno del testo. Non iniziano una nuova riga. Impostare width o height non produce alcun effetto. Il margine superiore e inferiore viene ignorato, mentre margini e padding orizzontali funzionano.

Elementi inline predefiniti: span, a, strong, em, img.

display: inline-block è una soluzione ibrida. Gli elementi fluiscono inline, senza interruzioni di riga forzate, ma supportano width, height e tutte le proprietà del box model come gli elementi block.

Prima di Flexbox, inline-block veniva utilizzato per le barre di navigazione orizzontali. Uno svantaggio è che gli spazi vuoti nel codice sorgente HTML creano piccoli intervalli tra gli elementi.

L'intervallo dovuto agli spazi vuoti tra gli elementi inline-block può essere rimosso impostando font-size: 0 sull'elemento padre e ripristinandolo negli elementi figli, oppure eliminando gli spazi vuoti nell'HTML.

Nel CSS moderno, impostare display: flex sull'elemento padre è il metodo preferito per ottenere layout orizzontali senza problemi di spazi vuoti. inline-block rimane utile per dimensionare un singolo elemento.

È possibile modificare con il CSS il tipo di display di qualsiasi elemento. Questa tecnica viene usata comunemente per dare ai collegamenti la forma di pulsanti o per disporre gli elementi di un elenco in orizzontale.

Il CSS mette a disposizione display: table, display: table-row, display: table-cell e così via per applicare il layout tabellare a elementi che non sono tabelle. Oggi sono raramente necessari, ma risultano utili per il centramento verticale in contesti meno recenti.

display: flow-root crea un nuovo contesto di formattazione dei blocchi senza gli effetti collaterali di overflow: hidden. Elimina i float e impedisce che il collasso dei margini fuoriesca dal contenitore.

Quando elementi block e inline sono mescolati come fratelli, il browser racchiude il contenuto inline isolato in riquadri block anonimi. È un comportamento invisibile, ma spiega alcuni spostamenti imprevisti del layout.

Gli elementi block occupano l'intera larghezza e iniziano una nuova riga. Gli elementi inline fluiscono insieme al testo e ignorano width e height. Inline-block combina entrambi i comportamenti: fluisce inline, ma accetta width e height. Per i layout moderni sono preferibili Flexbox e Grid rispetto alle griglie create con inline-block.