Proprietà display CSS

Definizione e uso

L'attributo display determina il tipo di area di visualizzazione generata dall'elemento.

Descrizione

Questa proprietà viene utilizzata per definire il tipo di area di visualizzazione generata dall'elemento durante la costruzione della layout. Per tipi di documento come HTML, se si utilizza display senza cautela può essere pericoloso perché può violare la gerarchia di visualizzazione già definita in HTML. Per XML, poiché XML non ha una tale gerarchia interna, display è assolutamente necessario.

Nota:Nel CSS2 ci sono i valori compact e marker, ma a causa della mancanza di ampia supporto, sono stati rimossi dal CSS2.1.

Vedi anche:

Corso CSS:Posizionamento CSS

Manuale di riferimento HTML DOM:Attributo display

Esempio

Fare apparire il riquadro inline del paragrafo:

p.inline
  {
  display:inline;
  }

Prova tu stesso

Sintassi CSS

display: value;

Valore dell'attributo

Valore Descrizione
none Questo elemento non viene visualizzato.
block Questo elemento viene visualizzato come elemento bloccante, con newline prima e dopo l'elemento.
inline Predefinito. Questo elemento viene visualizzato come elemento inline, senza newline prima e dopo l'elemento.
inline-block Elemento inline-block (valore aggiunto nel CSS2.1).
list-item Questo elemento viene visualizzato come elenco.
run-in Questo elemento viene visualizzato come elemento bloccante o inline in base al contesto.
compact Nel CSS esiste il valore compact, ma a causa della mancanza di ampia supporto, è stato rimosso dal CSS2.1.
marker In CSS c'è un valore marker, ma a causa della mancanza di ampia supporto, è stato rimosso da CSS2.1.
table Questo elemento viene visualizzato come tabella bloccante (simile a <table>), con caratteri di nuova riga prima e dopo la tabella.
inline-table Questo elemento viene visualizzato come tabella inline (simile a <table>), senza caratteri di nuova riga prima e dopo la tabella.
table-row-group Questo elemento viene visualizzato come gruppo di una o più righe (simile a <tbody>).
table-header-group Questo elemento viene visualizzato come gruppo di una o più righe (simile a <thead>).
table-footer-group Questo elemento viene visualizzato come gruppo di una o più righe (simile a <tfoot>).
table-row Questo elemento viene visualizzato come riga della tabella (simile a <tr>).
table-column-group Questo elemento viene visualizzato come gruppo di una o più colonne (simile a <colgroup>).
table-column Questo elemento viene visualizzato come colonna della cella (simile a <col>)
table-cell Questo elemento viene visualizzato come cella della tabella (simile a <td> e <th>)
table-caption Questo elemento viene visualizzato come intestazione della tabella (simile a <caption>)
inherit L'attributo display dovrebbe essere ereditato dal valore dell'elemento genitore.

Dettagli tecnici

Valore predefinito: inline
Ereditarietà: no
Versione: CSS1
Sintassi JavaScript: object.style.display="inline"

Esempio TIY

Come visualizzare un elemento come elemento inline
Questo esempio dimostra come visualizzare un elemento come elemento inline.
Come visualizzare un elemento come elemento bloccante
Questo esempio dimostra come visualizzare un elemento come elemento bloccante.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Nota:Se è definito !DOCTYPE, Internet Explorer 8 (e versioni successive) supporta i valori di attributo "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" e "inherit".