Layout ed effetti con CSS3 - HTML5 con CSS e JavaScript - page 96

reso invisibile, ma continua a occupare il suo spazio nella pagina (spazio calcolato sempre
secondo le regole del box model).
Per capire questo concetto, prendiamo come esempio tre elementi span , dove il
primo e il terzo elemento sono visibili, mentre il secondo è invisibile, così come mostrato
nell'esempio 5.7 .
Esempio 5.7
<span>Span 1</span>
<span style="visibility:hidden">Span 2</span>
<span>Span 3</span>
Il risultato è che il primo elemento span viene renderizzato ed è visibile nel browser, il
secondo elemento span viene renderizzato e occupa il suo spazio (seppur invisibile) e il
terzo elemento span è normalmente visibile. Il risultato dell'esempio 5.7 è visibile nella
figura 5.8 .
Figura 5.8 - Il secondo elemento span viene renderizzato e occupa spazio nonostante sia
invisibile.
Impostare la visibilità di un elemento mantenendo comunque lo spazio per l'elemento stes-
so è comodo in alcuni casi, ma in altri emerge la necessità di nascondere l'elemento e di
eliminarne anche lo spazio occupato sulla pagina. In questi casi torna utile la proprietà CSS
display .
Impostare la proprietà CSS display
La proprietà CSS display gestisce la renderizzazione di un elemento. Questa proprietà
può avere diversi valori, ma quelli più importanti sono: inline , block , inline-
block e none . Nelle prossime sezioni entreremo nel dettaglio di ogni valore, a comincia-
re da inline .
inline