Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Differences between CSS display: none; and visibility: hidden;
There are moments when you wish to visually hide elements in an application. There are several methods by which you can accomplish this. Using the visibility property with a hidden value (visibility:hidden;) or the display property with a none value (display:none;) are two common approaches.
Both approaches make the element hide, but they have different effects on how it behaves. In this article we are going to learn about the differences between display:none; and visibility:hidden;
CSS visibility:hidden
The CSS visibility:hidden property hides an element while preserving its space in the layout. The element becomes invisible but still occupies the same amount of space on the page, affecting the positioning of surrounding elements.
Syntax
visibility: visible | hidden | collapse | initial | inherit;
Example
Let's look at the following example, where we are going to use the CSS visibility:hidden property −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
}
.box {
height: 100px;
width: 150px;
font-size: 30px;
text-align: center;
line-height: 100px;
font-family: Arial, sans-serif;
color: white;
}
.box1 {
background-color: #e74c3c;
}
.box2 {
background-color: #f39c12;
visibility: hidden;
}
.box3 {
background-color: #3498db;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">A</div>
<div class="box box2">B</div>
<div class="box box3">C</div>
</div>
</body>
</html>
Two visible boxes (A and C) appear with a gap between them where the hidden box B would be. The space for box B is preserved.
CSS display:none
The CSS display:none property completely removes an element from the document flow. The element becomes invisible and does not occupy any space, causing surrounding elements to behave as if the hidden element doesn't exist.
Syntax
display: none | inline | block | inline-block | flex | grid;
Example
In the following example, we are going to use the CSS display:none property −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
}
.box {
height: 100px;
width: 150px;
font-size: 30px;
text-align: center;
line-height: 100px;
font-family: Arial, sans-serif;
color: white;
}
.box1 {
background-color: #e74c3c;
}
.box2 {
background-color: #f39c12;
display: none;
}
.box3 {
background-color: #3498db;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">A</div>
<div class="box box2">B</div>
<div class="box box3">C</div>
</div>
</body>
</html>
Only two boxes (A and C) appear side by side with normal gap. Box B is completely removed from the layout.
Key Differences
| Property | Space Occupied | Accessibility | Performance |
|---|---|---|---|
visibility: hidden |
Preserves space | Not readable by screen readers | Element still rendered |
display: none |
No space occupied | Not readable by screen readers | Element not rendered |
Conclusion
Use visibility: hidden when you want to hide an element but maintain its layout space. Use display: none when you want to completely remove an element from the document flow and collapse the space it would occupy.
1K+ Views
