Difference between display:none and visibility:hidden in CSS

Abhigyan Singh 09th Sep 2020

In some situations, we required to hide some HTML elements like any DIV, p tag, span tag, etc. So for hiding these HTML element from HTML page, we use display:none and visibility:hidden. Both features is use to hide HTML element but main difference between these is to removing element from HTML DOM(Document Object Model). Main Difference is given below:

display:none: It is used to hide an element. It will not take any space while hiding an element. It means that the hidden element is not considered as the DOM element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.div_hide{display:none;}
</style>
</head>

<body>
<div class="div_hide">Hide this element using display:none</div>
</body>
</html>

display:none: It is used to hide an element. It will not take any space while hiding an element. It means that the hidden element is not considered as the DOM element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.div_visibility{visibility:hidden;}
</style>
</head>

<body>
<div class="div_visibility">Hide this element using visibility:hidden</div>
</body>
</html>

Hide element using Javascript

document.getElementById(“imgbox1″).style.display=’none’;
document.getElementById(“imgbox2″).style.visibility=”hidden”;

NOTE: Both is used to hide an element and display:none does not occupy space but visibility:hidden occupy space.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk