0

Visibility vs display

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

11th May 2020, 8:35 PM
David Jaramillo
David Jaramillo - avatar
2 Answers
+ 3
David Jaramillo 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 | test Replacing [style-tag-value] with display:none results in: test | | test Replacing [style-tag-value] with visibility:hidden results in: test |                        | test
11th May 2020, 8:46 PM
Prince Kumar
Prince Kumar - avatar
0
Thanks for the answer. Now i am clear about it
12th May 2020, 5:11 PM
David Jaramillo
David Jaramillo - avatar