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

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:
22 / 33

Float e clear