CSS display none with hidden visibility

# Website Basics # css# displaynone# Visionhidden

The difference between display: none and visibility: hidden is display: none removes all elements from the layout of the page, causing the space previously occupied to disappear, and the user interface (such as a screen reader) cannot see the element at all. While visibility: hidden will hide the element, it will retain the original space of the element on the page, allowing the space to remain intact, and the element can interact with the user (e.g. click) if it is set to do so.

Display: none

Layout Effects:

Remove elements from the layout. No space is used on the page.

Element status:

It's like the element doesn't exist on the page.

Interaction (Interaction):

The element cannot interact with the user, and the screen reader will not access it.

Use case:

Fits hiding all elements completely, such as hiding an inactive menu, or swapping UI components to make the pages rearrange.

Visibility: hidden

Layout Effects:

The elements will hide, but still use the same space.

Element status:

The elements remain but are invisible.

Interaction (Interaction):

Elements can still interact with the user (e.g. click) if they are not turned off with another feature.

Use case:

Fits to temporarily hide content without changing the placement of other elements, or when wanting to hide part of the content but requiring that spaces remain.

Simple summary

Display: none: Gone at all. No space used.

Visibility: hidden: hidden, but use the same space.