Hi there! In this quick solution, we'll explore the difference between display: none and visibility: hidden. Both properties control the visibility of an element on a web page, but they work differently.
Let's dive in!
Display: none
When you use display: none on an element, it completely removes the element from the layout of the page. This means it takes up no space and doesn't affect the layout of other elements on the page. In simple terms, applying display: none deletes the element.
Visibility: hidden
When you apply visibility: hidden to an element, it hides the element from view, but the element still occupies space on the page. In other words, the element remains in its original position, but it's just not visible.
- Display: none = Completely removes an element from a layout.
- Visibility: hidden = Hides elements but preserves layout space.
A simple example is provided below to illustrate the difference between display: none and visibility: hidden.
Display: none
<head>
<style>
.container {
display: flex;
gap: 10px;
}
.box {
height: 180px;
width: 180px;
font-size: 50px;
text-align: center;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: green;
display: none;
}
.box-3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1 box">A</div>
<div class="box-2 box">B</div>
<div class="box-3 box">C</div>
</div>
</body>
Display: none
You can see when we apply display: none to element B, it is completely removed from the page.
Visibility: hidden
<head>
<style>
.container {
display: flex;
gap: 10px;
}
.box {
height: 180px;
width: 180px;
font-size: 50px;
text-align: center;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: green;
visibility: hidden;
}
.box-3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1 box">A</div>
<div class="box-2 box">B</div>
<div class="box-3 box">C</div>
</div>
</body>
Visibility: hidden
You can see when we apply visibility: hidden to the element B, it is completely hidden from the page but maintains its space.
In general, use display: none when you want to completely remove an element from the page, and use visibility: hidden when you want to make an element invisible while still keeping it in the layout.
If you have any questions about this topic or related to web development, then you can ask us using the question box given below, and you will get the answer soon.