When hiding elements on the client, there are multiple options. Two of the most common are through the selective toggling ofCSS properties of
What’s the difference? From LearnLayout.com1
display] is different from
nonewill 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
- … and many more. See MDN has an exhaustive list: