What is the difference between
Display:none and Display: hidden
In css ?

display: none removes it such that it doesn't take up space. Visibility: hidden makes it invisible.

"display: none;"
The element stays in the DOM but disappears completely from the browser rendering and event view, thus it doesn't have any size, doesn't react to any events and cannot influence other elements. All child elements of this one disappear as well.

"display: hidden;" doesn't exist in CSS

"visibility: hidden;"
The element still has its original position and size, but is not visibly rendered by the browser and does not react to pointer events (basically event-transparent).

This comment wins the votes.

One is valid CSS,

the other is not.

display:none is the default when you "basically want this thing to be invisible and out of the way"

visibility:hidden would only be used in special circumstances

(I think other posts have explained the technical difference so I'm just adding common practice)