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

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.