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

If visibility property set to "hidden", the browser will still take space on the page for the content even though it's invisible.
But when we set an object to "display:none", the browser does not allocate space on the page for its content.

Example:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

View details

Answer 2

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.

Answer 3

visibility:hidden will keep the element in the page and occupies that space but does not show to the user.

display:none will not be available in the page and does not occupy any space.

Answer 4

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.

Answer 5

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

Answer 6

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.