In this article, you will learn what is the difference between display:none and visibility:hidden. You can hide elements by declaring a display: none value. Another way is to declare visibility: hidden instead of display: none, but there is a difference between them. This is a very frequent interview question that is asked by the interviewer.
Let’s understand the difference between them, suppose we have a 3 elements A, B, and C
If you want to hide the Element B using visibility:hidden property of CSS, then the element is hidden but still takes up space.
On the other hand, if you want to hide the Element B using display:none property of CSS. the element is hidden as well as it doesn't take the space.
In the example below, you can see the clear difference between both the property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Difference Between display:none and visibility:hidden</title>
</head>
<body style="text-align: center;">
<h2><span style="color: purple;">Tutorials</span>Rack</h2>
<h3>display:none Property of CSS</h3>
<p>Test | <span style="display: none;">This tag is using display:none Property</span> | Test</p>
<br />
<h3>visibility:hidden Property of CSS</h3>
<p>Test | <span style="visibility: hidden;">This tag is using visibility:hidden Property</span> | Test</p>
</body>
</html>
display:none => if you use this property for hiding elements, the element is hidden completely from the HTML page and the element doesn't take the space. With this property, an element behaves like it is completely deleted.
Visibility:hidden => if you use this property for hiding elements, the element is just hidden from the HTML page but space is taken by the element still remains occupied. It just makes the element invisible.
I hope this article will help you to understand what is the difference between display: none and visibility: hidden.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments