September 16, 2019
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 fromvisibility
. Settingdisplay
tonone
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 display
2:
block
inline
flex
none
Options fo visibility
2:
visible
hidden
collapse
Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!