Display in CSS
La proprietĂ display specifica come e se un elemento viene visualizzato.
Ogni elemento HTML ha un valore di display predefinito a seconda del tipo. Il valore di visualizzazione predefinito per la maggior parte degli elementi è “block” o “inline”.
Elementi block
Un elemento di livello di blocco inizia sempre su una nuova riga e occupa l’intera larghezza disponibile.
Esempi di elementi HTML di livello di blocco:
<div><h1> - <h6><p><form><header><footer><section>
Elementi inline
Un elemento inline non inizia su una nuova riga e occupa solo la larghezza necessaria.
Esempi di elementi inline:
<span><a><img>
Display none
Display: none; viene comunemente utilizzato insieme a JavaScript per nascondere e mostrare elementi dinamicamente.
Differenza tra display:none e visibility:hidden
É possibile nascondere un elemento sia con display:none che visibility:hidden, tuttavia con risultati decisamente distinti. Con display none andiamo a nascondere l’elemento come se non esistesse nella pagina facendo traslare il resto del layout. Con visibility invece equivale ad avere un elemento con opacità zero, mantenendo però la sua posizione nella pagin.
h1.hidden { display: none;}h1.hidden { visibility: hidden;}