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

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

They are not synonyms.

display:none removes the element from the normal flow of the page, allowing other elements to fill in.

visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line. Everyone in line will then move forward one position to fill the now empty slot. This is like display:none.

Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak. While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there. This is like visibility:hidden.

display:none removes the element from the layout flow.

visibility:hidden hides it but leaves the space.

They're not synonyms - display: none removes the element from the flow of the page, and rest of the page flows as if it weren't there.

visibility: hidden hides the element from view but not the page flow, leaving space for it on the page.

display: none removes the element from the page entirely, and the page is built as though the element were not there at all.

Visibility: hidden leaves the space in the document flow even though you can no longer see it.

This may or may not make a big difference depending on what you are doing.

With visibility:hidden the object still takes up vertical height on the page. With display:none it is completely removed. If you have text beneath an image and you do display:none, that text will shift up to fill the space where the image was. If you do visibility:hidden the text will remain in the same location.

display:none will hide the element and collapse the space is was taking up, whereas visibility:hidden will hide the element and preserve the elements space. display:none also effects some of the properties available from javascript in older versions of IE and Safari.

display: none; 

It will not be available on the page and does not occupy any space.

visibility: hidden; 

it hides an element, but it will still take up the same space as before. The element will be hidden, but still, affect the layout.

visibility: hidden preserve the space, whereas display: none doesn't preserve the space.

Display None Example:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Visibility Hidden Example : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

display: none

It will remove the element from the normal flow of the page, allowing other elements to fill in.

An element will not appear on the page at all but we can still interact with it through the DOM. There will be no space allocated for it between the other elements.

visibility: hidden

It will leave the element in the normal flow of the page such that is still occupies space.

An element is not visible and Element’s space is allocated for it on the page.

Some other ways to hide elements

Use z-index

#element {
   z-index: -11111;
}

Move an element off the page

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

Interesting information about visibility: hidden and display: none properties

visibility: hidden and display: none will be equally performant since they both re-trigger layout, paint and composite. However, opacity: 0 is functionality equivalent to visibility: hidden and does not re-trigger the layout step.

And CSS-transition property is also important thing that we need to take care. Because toggling from visibility: hidden to visibility: visible allow for CSS-transitions to be use, whereas toggling from display: none to display: block does not. visibility: hidden has the additional benefit of not capturing JavaScript events, whereas opacity: 0 captures events

There are a lot of detailed answers here, but I thought I should add this to address accessibility since there are implications.

display: none; and visibility: hidden; may not be read by all screen reader software. Keep in mind what visually-impaired users will experience.

The question also asks about synonyms. text-indent: -9999px; is one other that is roughly equivalent. The important difference with text-indent is that it will often be read by screen readers. It can be a bit of a bad experience as users can still tab to the link.

For accessibility, what I see used today is a combination of styles to hide an element while being visible to screen readers.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

A great practice is to create a "Skip to content" link to the anchor of the main body of content. Visually-impaired users probably don't want to listen to your full navigation tree on every single page. Make the link visually hidden. Users can just hit tab to access the link.

For more on accessibility and hidden content, see:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/

One other difference is that visibility:hidden works in really, really old browsers, and display:none does not:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

The difference goes beyond style and is reflected in how the elements behave when manipulated with JavaScript.

Effects and side effects of display: none:

• the target element is taken out of the document flow (doesn't affect layout of other elements);
• all descendants are affected (are not displayed either and cannot “snap out” of this inheritance);
• measurements cannot be made for the target element nor for its descendants – they are not rendered at all, thus their clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), all return 0s.

Effects and side-effects of visibility: hidden:

• the target element is hidden from view, but is not taken out of the flow and affects layout, occupying its normal space;
• innerText (but not innerHTML) of the target element and descendants returns empty string.

display:none; will neither display the element nor will it allot space for the element on the page whereas visibility:hidden; will not display the element on the page but will allot space on the page. We can access the element in DOM in both cases. To understand it in a better way please look at the following code: display:none vs visibility:hidden

Summarizing all the other answers:

Resources:

• https://developers.google.com/speed/docs/insights/browser-reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• Performance differences between visibility:hidden and display:none

Other Info:

• There are some browser support idiosyncrancies as well, but they seem to apply to very old browsers, and are available in the other answers, so I have not discussed them here.
• There are some other alternatives to hide element, like opacity, or absolute positioning off screen. All of them have been touched upon in some or the other answers, and have some drawbacks.
• According to this comment (Performance differences between visibility:hidden and display:none), if you have a lot of elements using display:none and you change to display: (something else), it will cause a single reflow, while if you have multiple visibility: hidden elements and you turn them visible, it will cause reflow for each element. (I don't really understand this)

As described elsewhere in this stack, the two are not synonymous. visibility:hidden will leave space on the page whereas display:none will hide the element entirely. I think it's important to talk about how this affects the children of a given element. If you were to use visibility:hidden then you could show the children of that element with the right styling. But with display:none you hide the children regardless of whether you use display: block | flex | inline | grid | inline-block or not.