Con l’avvento dei CSS 2.0 è possibile gestire il posizionamento e la visibilità degli elementi HTML.

La visibilità si gestisce con la proprietà display ed è ereditaria.

I valori che display può assumere sono:

• inline: è il valore di default per diversi elementi html quali, per esempio, anchor, immagini, i tag di formattazione etc. Gli elementi inline sono mostrati mostrato nella riga in cui vengono inseriti ed occupano il minimo spazio indispensabile per mostrarli
• block: è il valore di default per tutti gli elementi che, in qualche modo, interrompono il contenuto “mandando a capo” ciò che è presente all’interno del tag. Tipici elementi block sono i paragrafi, le tabelle etc. Gli elementi che saranno classati con block avranno le caratteristiche tipiche del box model, quindi, bordi, padding, margin, altezza e larghezza.
• inline-block: questo valore consente di sfruttare le caratteristiche degli elementi blocco (e quindi larghezza, altezza, bordi etc) ed in linea (quindi verrà mostrato sulla stessa linea che il contenuto vicino)
• list-item: questo valore trasforma l’elemento classato in una lista (elenco puntato) e quindi erediterà la possibilità di gestire proprietà quali list-type etc.
• none: questa proprietà fa si che l’elemento non venga creato nel box model pur essendo presente nel codice html. Il risultato è che il browser non mostrerà a video ciò che viene stilato con display none

Esempio:

<a style="display:block;width:200px;height:30px;border:1px solid red">
link con proprietà block</a>
<div>all'interno di questo div c'è uno span con display:none
<span style="display:none">questo testo non verrà mostrato a video</span>
</div>
<div style="display:list-item">div tipo lista</div>

Il risultato sarà il seguente:

link con proprietà block

Trick

Adotta il display:none per nascondere elementi che non vuoi mostrare per motivi di debug, di sicurezza o per gestire fogli di stile differenti con le @-rules come, per esempio, quelli per la stampante.