CSS DISPLAY: block, inline, none, inline-block, list-item, run-in, compact, table
Wednesday 25 June 08 by Onsitus in CSS Proprietà
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 ‘The 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’.
|
|
Si |
Si |
Si |
Si |
Si |
| |
|
|
Si |
Si |
Si |
Si |
Si |
| |
|
|
Si |
Si |
Si |
Si |
Si |
| |
|
|
No |
Incompleto |
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 |
Incompleto |
Si |
Incompleto |
|
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.
|
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).
Esempio concreto:
first {display: block}
second {display: block}
third {display: block}
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.
Esempio concreto:
display: block
display: inline
display: block
display: block
display: block
display: inline
display: none
display: none vuole dire che l’elemento è reso invisibile (l’elemento con un bordo verde con display:none; non sarà ne anche visibile nel esempio).
Esempio concreto:
display: block
display: none
display: block
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.
Esempio concreto:
display: block
Aggiungiamo un po’ di contenuto per vedere come si comporta il blocco.
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.
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.
Esempio concreto:
display: block
display: list-item
display: list-item
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’.
Esempio concreto:
display: block
display: run-in
display: block
display: run-in
display: inline
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’e 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.
Esempio concreto:
display: block
display: compact
display: block
display: compact
display: block; margin-left: 10em
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’e 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.
Esempio concreto:
Questo esempio contiene <div> con display: table, table-row, e table-cell.
display: table
display: table-row
display: table-cell e un po di contenuto
display: table-cell
display: table-row
display: table-cell
display: table-cell
Il div contenitore in questo esempio ha display: block, e no table (tabella).
display: block
display: table-row
display: table-cell e un po di contenuto
display: table-cell
display: table-row
display: table-cell
display: table-cell
Questo esempio non contiene div con display: table-row
display: table
display: table-cell e un po di contenuto
display: table-cell
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.
Buon divertimento!
css display,
CSS Proprietà,
display:block,
display:inline,
proprieta display
{ 8 trackbacks }
{ 6 comments… read them below or add one }
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?
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
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!
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;}
So che l’articolo è un po vecchiotto , ma un problema di centratura immagini può essere legato a display: block; nel css ?
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!