What is the difference between display: none and visibility: hidden?

The main difference between display: none and visibility: hidden is how they affect the display and behavior of an element on the page:

• display: none completely removes the element from the document flow. The element does not occupy any space on the page, and the browser behaves as if the element is not there.

• visibility: hidden hides the element visually, but it still occupies space in the layout. That is, the space for the element remains, but the element itself is invisible.

Example:

<div style="width:100px; height:100px; background:red;">Red block</div>
<div style="width:100px; height:100px; background:blue; display:none;">Blue block (display:none)</div>
<div style="width:100px; height:100px; background:green; visibility:hidden;">Green block (visibility:hidden)</div>

In this example, the blue block will not be visible and will not take up space, while the green block will be invisible but the space for it will remain.

Use display: none when you want to completely remove an element from the page, and visibility: hidden when you want to hide an element while preserving its space in the layout.