Display: impostare la presentazione di un elemento

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 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:

ValoreDescrizione
blockl’elemento viene reso come un elemento blocco
inlinel’elemento a cui viene applicata assume le caratteristiche degli elementi inline
inline-blockl’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
nonel’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:

Tutte le lezioni

1 ... 20 21 22 ... 33

Se vuoi aggiornamenti su Display: impostare la presentazione di un elemento inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Display: impostare la presentazione di un elemento

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy