CSS Differenza tra display none e visbility hidden

Mediante l’utilizzo dei fogli di stile è possibile fare in modo che un elemnento sia visualizzato o meno. I modi con cui si può ottenere questo risultato sono principalmente due:

  1. Proprietà visibility con valore hidden
  2. Proprietà display con valore none

L’utilizzo dell’una o dell’altra proprietà all’interno di una regola CSS ci consentono si di non visualizzare un elemento, ma lo fanno in 2 modi diversi.


Usando la dichiarazione visibility: hidden; otterremo che il selettore della regola nella quale l’abbiamo dichiarato non sarà visisbile, ma occuperà lo spazio che occuperebbe se fosse viualizzato.

Mentre la dichiarazione display: none; non mostrerà l’elemento a cui fa riferimento, e non occuperà alcuno spazio.

Qui è possibile vedere un esempio animato che chiarisce meglio la differenza:

http://demo.studio-88.it/differenaza-tra-dislpay-none-e-visibility-hidden.php