- Learn
- Guida CSS di base
- Display: impostare la presentazione di un elemento
Display: impostare la presentazione di un elemento
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.
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:
Se vuoi aggiornamenti su Display: impostare la presentazione di un elemento inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Nokia all’Imagine Cup 2013
Con Daniele Pagani di Nokia parliamo di App Economy per cogliere alcuni suggerimenti per chi vuole realizzare applicazioni mobile