Visibility: Hidden vs. Display: None

Someone asked me the difference between visibility: hidden and display: none, so I thought I’d put the explanation I gave them, here as well.
The main difference between visibility: hidden and display: none is the effect they have (or don’t have) on the document layout.
The visibility CSS property itself, can show or hide an element without changing the document layout. Meaning the page will look exactly the same, except the element you applied visibility: hidden to will be invisible. The element still holds it’s place so all of the elements around it will stay exactly where they are. They will not shift into its space. Even though you can’t see the element, it’s still there.




Photo of WWE wrestler John Cena doing his "You Can't See Me" signature move.




And for those interested, the visibility property can also hide columns or rows in a table with the collapse value.
Now the display property set to “none” on the other hand doesn’t just hide an element, it actually removes the element from the layout of the document all together. So when using display: none the appearance of the page may change because the elements around the element set to display: none will now shift appropriately to fill its space. This is because the element display: none was applied to is no longer there at all. So that space in the layout must now be filled.




Diagram of characteristics of visibility: hidden and display: none in CSS.




Hope this is helpful to someone, and for those who have any comments or suggestions, let me know below.
Love & Peace,