Ciao e bentornati! 🙂

In questo breve articolo vi mostro due attributi css molto utili: display none e visibility hidden.

Entrambi servono a nascondere gli elementi dalla pagina, ma con delle differenze.

Poniamo di creare una pagina con quattro <div> con colori differenti, come mostrato nell’esempio sottostante.


1

Ora, se applicassimo al <div> di colore rosso la proprietà css display: none (come mostrato nell’esempio sottostante) il nostro elemento sparirà dal flusso della pagina e non sarà più visualizzato.

Se invece usassimo la proprietà css visibility: hidden l’elemento non sarà più visibile, ma continuerà ad occupare il suo “spazio naturale” (notate infatti lo spazio bianco in precedenza occupato dall’elemento azzurro).


1

Queste proprietà vengono usate in diversi contesti, ma soprattutto per adattare la pagina ai dispositivi di piccole dimensioni. Ad esempio, potremmo voler visualizzare un dato elemento solamente sui desktop (nascondendolo invece mentre si naviga da smartphone).




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.