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;
}