Corso di CSS - Lezione 4 - Proprietà display. Differenza tra div e span.

Nelle lezioni precedenti abbiamo collegato un file CSS e scritto un po’ di codice per vedere come funziona. In questa lezione ci concentreremo su una proprietà molto importante: display. La proprietà display determina come viene mostrato un elemento HTML nel documento — se verrà visualizzato in linea con il testo o come un blocco con larghezza e altezza proprie. Cominciamo dal comportamento predefinito dei tag: <div> viene mostrato come un blocco, mentre <span> come testo in linea. Creiamo una riga di testo di prova e racchiudiamola in un tag span.

display: inline

Il tag span viene visualizzato in linea, come dovrebbe essere il testo (a meno che non si tratti di ideogrammi giapponesi visualizzati in colonna). Il tag span non ha né altezza né larghezza definite: non è possibile impostare queste proprietà su un elemento con display: inline, perché il testo viene misurato in base ad altre caratteristiche — dimensione del font, tipo di carattere, colore, spaziatura tra lettere, righe e parole, margine dall’inizio della riga. Se vuoi impostare dimensioni o margini su un elemento, devi usare un altro valore della proprietà display.

display: block

Il valore block è quello predefinito per il tag div. Questo tipo di visualizzazione permette di impostare larghezza, altezza e margini del blocco. In questo modo possiamo creare un’area nella pagina e inserirvi testo, immagini o altri blocchi. Possiamo persino assegnare display: block a un tag span (ad esempio <span class="block">testo</span>), e questo elemento avrà allora una larghezza e un’altezza proprie, comportandosi come un blocco.

Un’altra caratteristica di display: block è che il blocco si estende orizzontalmente per tutta la larghezza disponibile (cioè, di default, width: 100%). Tuttavia, non è possibile assegnargli height: 100%, perché il blocco occupa in altezza solo lo spazio necessario al suo contenuto. L’altezza può essere impostata in pixel, ad esempio 800px, ma non può essere estesa all’intera altezza dello schermo. Parleremo di come farlo nelle prossime lezioni.

display: inline-block

Ci sono situazioni in cui vogliamo che le immagini o gli elementi si comportino come blocchi (avendo altezza, larghezza e margini), ma che allo stesso tempo non si estendano per tutta la larghezza disponibile, bensì si dispongano uno accanto all’altro. In questi casi si usa inline-block. Questo valore combina le caratteristiche di inline e block. È possibile assegnare display: inline-block anche a elementi già di tipo blocco.

display: table

Il valore table viene usato di default per le tabelle. A differenza dei blocchi, una tabella può essere estesa in altezza al 100%, ma in generale è meglio utilizzare la struttura a blocchi (layout a div) invece delle tabelle per l’impaginazione, poiché le tabelle dovrebbero essere usate solo per dati tabellari.

display: list-item

Con il valore list-item (usato di default per il tag <li>), viene aggiunto un marcatore — un punto nero per impostazione predefinita.

display: none

Se assegni questo valore a una classe, un tag o un ID, l’elemento scomparirà completamente dal sito! Fai attenzione, perché potresti nascondere qualcosa di importante e non capire più perché non viene visualizzato. Tuttavia, se un cliente chiede di nascondere un elemento (ad esempio un’icona RSS), puoi farlo così:

.rss {
  display: none;
}

Ovviamente, il modo più corretto sarebbe rimuovere l’elemento dal template, così da non farlo stampare nel codice HTML. Ma se viene comunque generato, puoi nasconderlo facilmente tramite CSS senza troppi problemi.