display

Il fatto che nell’HTML esistano diverse tipologie di elementi è uno dei punti a favore di questo linguaggio… il fatto che con CSS si possa variarne la tipologia è un altro punto a suo favore.

Prima di andare oltre, tuttavia, vorrei che ti soffermassi per un attimo su tutte le tipologie di visualizzazione che un elemento può assumere. Tieni conto che alcune di esse sono molto rare e difficilmente le utilizzerai in un progetto. Tutte le tipologie di visualizzazione sono: inline, block, inline-block, inline-table, list-item, table, table-caption, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, flex, inline-flex¹, none.

Come abbiamo visto nel capitolo introduttivo, i due elementi più comuni sono inline e block. Tuttavia hai sicuramente già incontrato altre tipologie: gli elementi di lista sono dei list-item, le tabelle sono dei table (per non parlare delle righe, delle colonne e delle celle).
Grazie, quindi, ai CSS puoi far variare a tuo piacimento la visualizzazione di un elemento.

span{
   display: block;
}

In questo modo cambi temporaneamente le modalità con cui uno <span> si presenta, rendendolo di tipo block. Attenzione però: non vuol dire che a livello logico <span> adesso sia di tipo block, per cui puoi inserire al suo interno un DIV, ad esempio²! La sua naturale funzionalità rimane. È come se prendessi il motore di una Ferrari e lo inserissi all’interno di una Panda: non è che potrai per questo vantarti con i tuoi amici di aver acquistato una Ferrari!

Ritornando un secondo sull’argomento float e clear, potendo variare la visualizzazione di un elemento, capisci anche come sia possibile utilizzare un clear su uno <span>.

In questo modo non vai a “sporcare” l’HTML con tag non necessari e con 3 semplici righe di CSS ti risolvi un grande problema.