Both of the property is quite useful in CSS. The visibility: “hidden”; property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. The visibility is a property in CSS that specifies the visibility behavior of an element and display: “none” property is used to specify whether an element is exist or not on the website.
- Visibility property:
visibility: visible| hidden | collapse | initial | inherit;
- Display propety:
display: none | inline | block | inline-block;
So, the difference between display: “none”; and visibility: “hidden”;, right from the name itself we can tell the difference as display: “none”;, completely gets rids of the tag, as it had never exists in the HTML page whereas visibility: “hidden”;, just makes the tag invisible it will still be on the HTML page occupying space it’s just invisible.
In the visibility span, the tag still exists as you can see space between, whereas as display got rid of the tag.
- display = “none”;
document.getElementById("Id").style.display = "none";
- visibility = “hidden”;
document.getElementById("Id").style.visibility = "hidden";
In the above when the display button is clicked the whole page shifts upwards occupying the space of the deleted div tag while when the visibility button is clicked it doesn’t as the div still exists in invisible form.
- Difference between ASP and ASP.NET
- Difference between “!==” and “==!” in PHP
- Web 1.0, Web 2.0 and Web 3.0 with their difference
- Difference between JSP and ASP
- What is the difference between GUI and CUI?
- What is the difference between (NaN != NaN) & (NaN !== NaN)?
- What is the difference between the | and || or operator in php?
- Difference between Where and Group By
- Difference Between HTML and ASP
- Difference between ReactJS and Vue.js
- Difference between JSON and XML
- Difference between array() and  in PHP
- Difference between "." and "#" selector in CSS
- What is the difference between CSS and SCSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.