loading...

`Display: None` vs `Visibility: Hidden`

stephencweiss profile image Stephen Charles Weiss Originally published at stephencharlesweiss.com on ・2 min read

When hiding elements on the client, there are multiple options. Two of the most common are through the selective toggling ofCSS properties of display and visibility.

What’s the difference? From LearnLayout.com1

This [display] is different from visibility. Setting display to none will render the page as though the element does not exist. visibility: hidden; will hide the element, but the element will still take up the space it would if it was fully visible.

As a result, if the element is positioned absolutely, the “space” consumed when displayed will not affect anything.

To ensure that the layout doesn’t shift, however, it makes sense to use the visibility property.

Options for display2:

  • block
  • inline
  • flex
  • none
  • … and many more. See MDN has an exhaustive list:

Options fo visibility2:

  • visible
  • hidden
  • collapse

Resources

Discussion

pic
Editor guide