The difference between display:none and visible:hidden Both display:none and visible:hidden can hide an element on the web page, but there is a difference between the two:
display:none ---Do not reserve the physical space for the hidden object, that is, the object completely disappears from the page. In layman's terms, it cannot be seen or touched.
visible:hidden--- makes the object invisible on the web page, but the space occupied by the object on the web page does not change. In layman's terms, it means that it cannot be seen but can be touched.
Example:
The difference between display:none and visible:hidden
hidden areadisplay area
hidden areashow area
How to show and hide jQuery