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

Question

The CSS rules visibility:hidden and display:none both result in the element not being visible. Are these synonyms?

Answer 1

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.

Answer 2

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

Answer 3

In addition to all other answers, there's an important difference for IE8: If you use display:none and try to get the element's width or height, IE8 returns 0 (while other browsers will return the actual sizes). IE8 returns correct width or height only for visibility:hidden.

Answer 4

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/

Answer 5

One thing worth adding, though it wasn't asked, is that there is a third option of making the object completely transparent. Consider:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(Be sure to click "Run code snippet" button above to see the result.)

The difference between 1 and 2 has already been pointed out (namely, 2 still takes up space). However, there is a difference between 2 and 3: in case 3, the mouse will still switch to the hand when hovering over the link, and the user can still click on the link, and Javascript events will still fire on the link. This is usually not the behavior you want (but maybe sometimes it is?).

Another difference is if you select the text, then copy/paste as plain text, you get the following:

1st link.
2nd  link.
3rd unseen link.

In case 3 the text does get copied. Maybe this would be useful for some type of watermarking, or if you wanted to hide a copyright notice that would show up if a carelessly user copy/pasted your content?

Answer 6

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