What is the difference between "display:none" and "visibility:hidden", when used as attributes to the HTML element.Verify your answer with your own examples.

"display:none" and "visibility:hidden" are both CSS properties that can be used to hide HTML elements, but there is a difference between the two.

"Display:none" removes the element from the document flow entirely, meaning that the element will not take up any space on the page. This essentially makes the element completely invisible and inaccessible to the user. For example, consider the following HTML code:

<div style="display:none;">This text will not be displayed</div>

In this case, the div element will not be displayed on the page, and its contents will not take up any space.

On the other hand, "visibility:hidden" hides the element but still reserves space for it on the page. This means that the element is still technically on the page, but it is not visible to the user. For example, consider the following HTML code:

<div style="visibility:hidden;">This text will be hidden</div>

In this case, the div element will still be on the page, but its contents will not be visible.

To summarize, "display:none" removes the element from the document flow entirely, while "visibility:hidden" hides the element but still reserves space for it on the page.