CSS DISPLAY: block, inline, none, inline-block, list-item, run-in, compact, table
Vedremo in più dettagli la proprietà css display che permette di definire le modalità di visualizzazione d’un certo elemento HTML.
Questo articolo è una traduzione della versione originale in inglese intitolata ‘he display declaration’ e pubblicato su questo sito con l’autorizzazione del autore.
Guarda anche le specifiche del W3C per la proprietà display.
La seguente tabella riporta la compatibilità dei vari browser con le dichiarazione ‘display’.
| Value | IE 5.5 | IE 6 | IE 7 | IE8b1 | FF 2 | FF 3b4 | Saf 3.0 Win | Saf 3.1 Win | Opera 9.5b | Konqueror 3.5.7 |
|---|---|---|---|---|---|---|---|---|---|---|
| Si | Si | Si | Si | Si | ||||||
| Si | Si | Si | Si | Si | ||||||
| Si | Si | Si | Si | Si | ||||||
| No | Incom |
Si | No | Si | Si | Si | Si | |||
|
IE 6/7 accettano questo valore solo per elementi naturalmente inline. |
||||||||||
| No | Si | Si | Si | Si | Si | |||||
| No | Buggy | No | Incom |
Si | Incom |
|||||
|
Safari e Konqueror non passano uno dei due test. IE8b1 fa qualche cosa ma è del tutto sbagliato. |
||||||||||
| No | No | Buggy | Buggy | Buggy | ||||||
| No | Si | Si | Strict | Si | Si | |||||
|
Safari richiede elementi con display: table e display: table-row per visualizzare le celle correttamente. Non è il caso per altri browser. |
||||||||||
| Value | IE 5.5 | IE 6 | IE 7 | IE8b1 | FF 2 | FF 3b4 | Saf 3.0 Win | Saf 3.1 Win | Opera 9.5b | Konqueror 3.5.7 |
display: block
display: block mostra un elemento come blocco, esattamente come accade naturalmente per le testate e per i paragrafi.
Un blocco ha degli spazi bianchi al di sopra o al di sotto, ma non accetta nessun elemento HTML a fianco, eccezione fatta se l’elemento è ordinato altrimenti (per esempio, aggiungendo la proprietà css float).
display: inline
display: inline vuole dire che l’elemento è mostrato in riga, nel riquadro corrente sulla stessa linea.
Solamente quando è tra due blocchi, l’elemento forma un ‘blocco anonimo’, che comunque mantiene una larghezza la più piccola possibile.
display: none
display: none vuole dire che l’elemento è reso invisibile (l’elemento con un bordo verde con display:none; non sarà neanche visibile nel esempio).
display: inline-block
Un inline block è posizionato in riga (es. sulla stessa linea che il contenuto vicino) ma si comporta come un blocco.
In Explorer 6 and 7 inline-block funziona solo per gli elementi che hanno un display: inline naturale.
In Mozilla se può usare -moz-inline-box, ma attenzione che non è uguale a inline-block, e potrebbe non funzionare come desiderato in certe situazione.
Aggiungiamo un po’ di contenuto per vedere come si comporta il blocco.
Aggiungiamo un po’ di contenuto per vedere come si comporta il blocco.
Aggiungiamo un po’ di contenuto per vedere come si comporta il blocco.
Aggiungiamo un po’ di contenuto per vedere come si comporta il blocco.
span (e non div) con display: inline-block; width: 10em
Aggiungiamo un po’ di contenuto per vedere come si comporta il blocco. Aggiungiamo un po’ di contenuto per vedere come si comporta il blocco.
Invece, vediamo come dovrebbe comportarsi: (Opera):
L’uso di questo valore: se vogliamo dare a un elemento ‘inline’ una larghezza width. In certe situazione, certi browsers non permettono un width su un elemento ‘inline’ reale, ma se scambiamolo per display: inline-block possiamo allora dare un width al nostro elemento.
display: list-item
display: list-item vuole dire che l’elemento è mostrato come un elenco/lista che principalmente vuole dire che ha una ‘pallottola’ (bullet) di fronte (come un UL), eccetto in Esplorer 5 su Mac dove mostra un numero (come un OL). I numeri causano errore:
ogni Li precedente trovati nella pagina contano come uno, così questo esempio comincia con numero 5.
Not supported by Explorer 5 Windows.
display: run-in
display: run-in definizione dal W3C:
“Se un riquadrato a blocco (che non flotta e non è posizionato in modo assoluto) segue il riquadrato incorporato, il riquadrato incorporato diventa il primo riquadrato in riga del riquadrato a blocco.
Altrimenti, il riquadrato incorporato diventa un riquadrato a blocco.”
Domanda: Perché voleremo fare quello?
Comunque, Opera è l’unico browser che supporta veramente quello. Toglie il ‘padding-top’ e ‘bottom’ (gli cuscinetti in alto e in basso) del blocco ‘run-in’ anche se W3C dice che non dovrebbe.
Explorer 5 Mac invece da una piccolo indentazione per quale non si sa la ragione.
Supportato incorrettamente da Safari 1.3.2: nel secondo esempio the blocco ‘inline’ dovrebbe rimanere sotto il blocco ‘run-in’.
Dovrebbe funzionare cosi (Opera):
display: compact
display: compact definizione dal W3C:
” Se un riquadrato a blocco (che non flotta e non è posizionato in modo assoluto) segue il riquadrato compatto, il riquadrato compatto è formattato come un riquadrato in riga ad una riga [one-line inline]. [piu definizione riguardo le margine]
Altrimenti, il riquadrato compatto diventa un riquadrato a blocco.”
Il riquadrato compatto e piazzato a sinistra del successivo riquadrato se c’è abbastanza spazio per permetterlo. Nel secondo esempio seguente, il terzo riquadrato ha una margine sinistra (margin-left) lasciando abbastanza spazio per il riquadrato compatto.
Nel primo esempio, non c’è abbastanza spazio per il riquadrato compatto che viene mostrato come blocco.
Nessun browser supporta correttamente la proprietà css display:compact.
Dovrebbe funzionare cosi (Opera):
display: table
display: table dice a l’elemento di mostrarsi come una tabella (table). Gli elementi incorporati dovreberono comportarsi come table-row e table-cell, mimetizzando gli vecchi TR e TD. C’è anche il display: table-column ma quello non mostrerebbe nulla e serve solo per informazione di stile come COL (colonne).
Non supportato da Explorer.
Safari richiede elementi con display: table e display: table-row per mostrare le celle correttamente.
iCab non mostra il testo con display: table-row.
Questo esempio contiene <div> con display: table, table-row, e table-cell.
Il div contenitore in questo esempio ha display: block, e no table (tabella).
Questo esempio non contiene div con display: table-row
Dovrebbe essere visto cosi (Firefox 1.5):
Pero, Safari continua a insistere sugli elementi con display: table e display: table-row:
Alla fine del articolo originale, si trova un applicazione javascript per giocare con le differente dichiarazione display e dare un idea di quello che può succedere scambiando i display tra di loro.
About The Author
Lorenzo
Ottimo questo post! Io ho incontrato grossi problemi poichà © devo creare un’applicazione cross-browser nella quale ho la necessità  di nascondere/mostrare una riga di tabella, creata per altro tramite javascript… Il valore corretto della proprietà  display quando la riga deve essere visibile sarebbe ‘table-row’, ma IE7 (come da te segnalato) non lo supporta. Utilizzando ‘block’, invece, da problemi di visualizzazione su firefox (inserisce tutto il contenuto in un’unica riga). Qualcuno ha idea di come potrei ovviare al problema?
Onsitus
Ciao Lorenzo, se tutto il contenuto viene visualizzato su una unica riga, non so specificare una larghezza fissa potrebbe essere utile?
Se proprio non c’è una soluzione per soddisfare entrambi browser, usare 2 fogli di stile: una per FF, una per IE
Lorenzo
Quella dell’utilizzo di due fogli di stile separati era la soluzione che mi sembrava più plausibile, ma anche quella che volevo tentare di evitare.. anche perchà ©, al momento, l’unica proprietà  che mi crea problemi è proprio questa, tutto il resto funziona correttamente (parliamo ovviamente di IE7).
Purtroppo la largheza delle colonne non può essere fissa (alcune colonne si adattano a seconda della dimensione del div all’interno del quale è contenuta la tabella), ma cercando qua e la ho visto che anche con larghezza fissa la situazione non migliora!
Onsitus
Sinceramente non sapendo la struttura che hai usato, non saprei che dirti…usando del genere *body .row{display:inline;} lasciando sempre lo stile .row{display:table-row;}
Fire
So che l’articolo è un po vecchiotto , ma un problema di centratura immagini può essere legato a display: block; nel css ?
Onsitus
Ciao Fire,
vabhe, le proprietà  css sono sempre quelle.
Riguardo la tua domanda non ho idea. Sarebbe da vedere la struttura completa, come è centrata l’immagine e a quale elemento è applicato il display:block;
Se hai una pagina di prova online, posta pure il link se ti va!
alessandro mariani
grazie ce ne fossero così di tutorials…
alfonso
ciao, in merito al problema volevo chiederti. Ho un div con l’attributo “display none” gestito da jquery e poi ho un’altro div contenuto in esso sempre gestito da jquery però mi blocca la funzionalità. Come disattivo il “display none” il div contenuto nel principale riprende a funzionare correttamente.
come posso disabilitare la funzione solo nel div secondario?
oppure come posso risolvere il problema?
grazie