Difference between visibility: hidden and display: none
Though these two might sound the same, visibility: hidden and display: none works differently and can be used for several different cases. Let’s see the difference between them and their use cases here.
Visibility: hidden
When you use this CSS property on an element, it will be hidden from the screen but takes up the screen’s space. So the contents present before and after the element containing this property will be rendered, but it will leave the exact amount of space for the hidden element to occupy. The HTML element is still present in the DOM but the element won’t show up on the screen and takes up space. As per MDN Documentation:
The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).
Display: none
On the other hand, display: none does a similar job, by hiding the element from the screen. But in this case, it won’t leave any space and the behavior feels like the element having this property doesn’t exist. Note that this property has no effect on the DOM and the element is still present in the DOM. It’s just that the element is hidden inside the DOM. You can’t remove an element from DOM using this CSS property.
Use cases
Visibility: hidden
Visibility: hidden can be used in situations where you want to hide an element but show it after performing an action, but keep enough space for it so that you don’t shift your whole layout once the action is performed.
Display: none
Display: none can be used in the cases where you’ll have to display certain elements and hide the others based on what the user wants to see. One such example is Tab contents where the user selects a particular tab, and the contents under it are rendered based on the currently selected tab. The selected tab’s content is set to display: block or whatever the use case is, while the other contents are set to display: none. The property gets toggled every time the particular tab is changed.
