CSS Visibility: display vs. visibility
What is the difference between visibility:hidden and display:none? Here is the answer.
It’s quite simple: visibility:hidden renders the element and reserves space for it on the rendered page. However the element and all its subelements are not visible.
The display property affects the rendering box of an element. With display:none the page is rendered like the element and also all subelements are not part of the page anymore.
And what should I use now: display or visible?
This depends on what you like to achieve. For example: If you have a notifcation bubble in a menu, it’s better to use visbility, just because the space for the bubble is already reserved and does not cause any layout shift, when becoming visible.
If you want to hide and show a context menu, it’s better to use display because you don’t want the space for the context menu to be reserved when it’s not shown.
Links
Words: 200 | Reading Time: 1 min