Enciclopedia CSS: display

Template:Programmazione Capire la proprietà CSS display può essere complicato a causa dell'enorme numero di valori disponibili, ognuno dei quali influisce sul comportamento e sulla visualizzazione di un elemento. Questa proprietà determina come si comporta un elemento nel documento: se sarà un blocco, inline, flessibile, a griglia o completamente invisibile.

Elenco dei valori disponibili per la proprietà display

Ecco l'elenco dei valori disponibili per la proprietà display:

• display: -webkit-box — valore obsoleto per creare un layout a blocchi nei browser Webkit.
• display: -webkit-inline-box — valore simile a -webkit-box, ma per un layout inline nei browser Webkit.
• display: block — l'elemento diventa un blocco, occupando tutta la larghezza del suo contenitore.
• display: contents — l'elemento scompare, ma i suoi elementi figli rimangono nel DOM.
• display: flex — l'elemento diventa un contenitore per il layout flessibile (Flexbox).
• display: flow — imposta il comportamento predefinito del flusso (valore principale per la maggior parte degli elementi).
• display: flow-root — crea un nuovo contesto di formattazione a blocco, come se l'elemento fosse un contenitore a blocco.
• display: grid — l'elemento diventa un contenitore per il layout a griglia (Grid).
• display: inherit — l'elemento eredita il valore della proprietà display dal suo contenitore.
• display: initial — ripristina la proprietà display al suo valore iniziale.
• display: inline — l'elemento diventa inline, occupando solo la larghezza necessaria.
• display: inline-block — l'elemento combina il comportamento inline e a blocco (può avere dimensioni, ma rimane nella stessa riga).
• display: inline-flex — l'elemento diventa un contenitore Flexbox inline.
• display: inline-grid — l'elemento diventa un contenitore Grid inline.
• display: inline-masonry — valore sperimentale per una griglia inline con layout dinamico.
• display: inline-table — l'elemento si comporta come una tabella inline.
• display: list-item — l'elemento diventa un elemento di lista con un marcatore (come <li>).
• display: masonry — valore sperimentale per una griglia con layout dinamico.
• display: math — valore sperimentale per la formattazione matematica.
• display: none — l'elemento è nascosto e non occupa spazio nel documento.
• display: revert — ripristina la proprietà display agli stili predefiniti del browser.
• display: revert-layer — valore sperimentale per ripristinare gli stili in specifici livelli.
• display: ruby — l'elemento si comporta come un contenitore per le annotazioni Ruby (utilizzate in lingue che richiedono Furigana).
• display: ruby-text — l'elemento si comporta come il testo Ruby (Furigana).
• display: table — l'elemento si comporta come una tabella a blocco.
• display: table-caption — l'elemento si comporta come una didascalia di tabella.
• display: table-cell — l'elemento si comporta come una cella di tabella.
• display: table-column — l'elemento si comporta come una colonna di tabella.
• display: table-column-group — l'elemento si comporta come un gruppo di colonne di tabella.
• display: table-footer-group — l'elemento si comporta come un gruppo di righe di piè di pagina della tabella.
• display: table-header-group — l'elemento si comporta come un gruppo di righe di intestazione della tabella.
• display: table-row — l'elemento si comporta come una riga di tabella.
• display: table-row-group — l'elemento si comporta come un gruppo di righe di tabella.
• display: unset — rimuove il valore stabilito, ripristinando la proprietà al suo stato iniziale o ereditato.

Ognuno di questi valori ha uno scopo specifico che consente di controllare in modo flessibile il layout di una pagina web. Tuttavia, a causa della varietà di valori, può essere difficile scegliere quello giusto, e una scelta errata può portare a risultati inaspettati.

In articoli separati, esamineremo ciascun valore della proprietà display, scopriremo quando e come utilizzarlo e analizzeremo la compatibilità con i browser.