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 property:
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.
- What is the difference between GUI and CUI?
- What is the difference between MEAN.js and MEAN.io?
- What is the difference between (NaN != NaN) & (NaN !== NaN)?
- Difference between “!==” and “==!” in PHP
- Difference between ASP and ASP.NET
- Difference between JSP and ASP
- Web 1.0, Web 2.0 and Web 3.0 with their difference
- Difference Between Blu-Ray and DVD
- Difference between T-SQL and PL-SQL
- Difference Between Node.js and Asp.net
- Difference between JSON and XML
- Difference between 2NF and 3NF in DBMS
- Difference between VGA and SVGA
- What is the difference between the | and || or operator in php?
- Difference between Where and Group By
- Difference between HTML and CSS
- Difference between Python and C++
- Difference between Where and Having Clause in SQL
- Difference between ReactJS and Vue.js
- Difference between array() and  in PHP
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.