visibility: hidden and display: none are two CSS properties that can be used to hide elements. While they may seem similar at first glance, there are some significant differences between them. In this article, we’ll explore these differences and provide some examples to illustrate their use.
The UX Designer Toolbox
Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets Starting at only $16.50 per month!
visibility: hidden
The visibility property in CSS determines whether or not an element is visible on the web page. If set to hidden, the element will be hidden from view, but it will still occupy space on the page. This means that any other elements that would normally be positioned after it will still be positioned as if the hidden element were still visible.
Here’s an example of how visibility: hidden works:
<!DOCTYPE html>
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%23hidden-element%20%7B%0A%20%20%20%20%20%20%20%20visibility%3A%20hidden%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<p>This is some text before the hidden element.</p>
<div id="hidden-element">
<p>This element is hidden using visibility.</p>
</div>
<p>This is some text after the hidden element.</p>
</body>
</html>
In this example, the #hidden-element is hidden using visibility: hidden. Notice that the element still occupies space on the page, and the text after it is still positioned as if it were visible.
display: none
The display property in CSS determines how an element is displayed on the web page. If set to none, the element will be completely removed from the page and will not occupy any space. This means that any other elements that would normally be positioned after it will be repositioned as if the hidden element were not present.
Here’s an example of how display: none works:
<!DOCTYPE html>
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%23hidden-element%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<p>This is some text before the hidden element.</p>
<div id="hidden-element">
<p>This element is hidden using display.</p>
</div>
<p>This is some text after the hidden element.</p>
</body>
</html>
In this example, the #hidden-element is hidden using display: none. Notice that the element does not occupy any space on the page, and the text after it is repositioned as if the element were not present.
When to use visibility: hidden vs. display: none
Now that we’ve seen how visibility: hidden and display: none work, it’s important to consider when to use one over the other.
Use visibility: hidden when you want to hide an element from view but still want it to occupy space on the page. This can be useful when you want to reveal the element later or when you want to maintain the layout of the page.
Use display: none when you want to completely remove an element from the page and don’t want it to occupy any space. This can be useful when you want to completely hide an element and don’t plan to reveal it later.