What is the difference between visibility:hidden and display:none?
css, visibility
Solution
`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
Problem
The CSS rules `visibility:hidden` and `display:none` both result in the element not being visible. Are these synonyms?