Visualizza wikitesto di Enciclopedia CSS: display

{{Programmazione
|nome = Introduzione a CSS
|immagine = Css.png
|dimensione immagine = 300
|portale = [[Portale:CSS|Portale CSS]] • [[Portale:Sviluppatori Web|Portale Sviluppatori Web]]
}}
Capire la proprietà CSS <code>display</code> 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à <code>display</code> ===
Ecco l'elenco dei valori disponibili per la proprietà <code>display</code>:

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

== Altri articoli su CSS ==
{{Enciclopedia CSS/Navigazione|state=uncollapsed}}
{{Template:Navigazione/CSS}}
[[wj-en:Encyclopedia CSS: display]]
[[wj-de:Enzyklopädie CSS: display]]
[[wj-es:Enciclopedia CSS: display]]
[[wj-ru:Энциклопедия CSS: display]]
[[wj-fr:Encyclopédie CSS: display]]

[[Categoria:CSS]]