What is the difference between “display: none” and “visibility: hidden” when used as attributes to the HTML element?

The main difference between “display: none” and “visibility: hidden” is that the former removes the element from the document flow, while the latter simply hides it. Elements with “display: none” are not visible and do not take up any space on the page, while elements with “visibility: hidden” are not visible but still take up space.