Display: impostare la presentazione di un elemento

di Cesare Lamanna
24 Giugno 2013

Con questa lezione inizia la sezione della guida dedicata alle proprietà connesse al cosiddetto modello di formattazione visuale. Sono le proprietà con cui si gestiscono il comportamento, la visibilità e il posizionamento dei box con il CSS.

La proprietà display

Questa proprietà serve per controllare con i CSS il modo in cui un elemento viene reso dal browser.

Abbiamo imparato nella lezione 2 che ogni elemento HTML ha un suo comportamento predefinito rispetto alla presentazione: si parla di elementi blocco, elementi in linea, elementi di lista e elementi di tabella.

Ebbene, con la proprietà display possiamo modificare, quando e se necessario, questo comportamento di default. La proprietà display è ereditata.

Sintassi ed esempi

La definizione sintattica di questa proprietà è molto semplice:


selettore {display: valore;}

Il valore può essere rappresentato unicamente da una parola chiave. Nella pratica comune, i valori in assoluto più utili e usati sono:

Valore	Descrizione
`block`	l’elemento viene reso come un elemento blocco
`inline`	l’elemento a cui viene applicata assume le caratteristiche degli elementi inline
`inline-block`	l’elemento può assumere, come gli elementi blocco, dimensioni esplicite (larghezza e altezza), margini e padding, ma come tutti gli elementi inline, si disporrà orizzontalmente e non verticalmente, potendo essere circondato dal testo ed essendo sensibile all’allineamento verticale
`none`	l’elemento non viene mostrato; o meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box; l’uso del valore `none` è uno dei mezzi con cui, nei CSS, si può nascondere un elemento

Un valore specifico consente di impostare per un elemento una presentazione equivalente a quella degli item di una lista:

list-item

Una serie di valori, poi, fa riferimento alla possibilità di impostare il display degli elementi come elementi di una tabella. Ecco la lista:


table | inline-table | table-cell | table-row |
table-row-group | table-column | table-column-group |
table-header-group | table-footer-group | table-caption

Altri valori possibili, ma praticamente mai usati sono:

run-in: l’elemento viene incorporato e inserito all’inizio del blocco seguente;
compact: l’elemento viene piazzato al fianco di un altro;
marker: questo valore fa sì che il contenuto generato con gli pseudo-elementi :before e :after sia trattato come un marcatore di liste.

Esempi.

Approfondimenti

La proprietà display, specie quando è usata con i primi quattro valori visti poc’anzi, è alla base di innumerevoli e importantissime tecniche CSS. Ci limitiamo a qualche segnalazione sparsa dall’archivio dei nostri articoli: