CSS What is the difference between visibility:hidden and display:none
CSS What is the Difference Between Visibility: Hidden and Display: None
In CSS, the “visibility” and “display” properties are used to show and hide HTML elements. They can have different values, and the differences between them are explained below.
In this tutorial, we will see the difference between the “visibility: hidden” and “display: none” CSS properties.
What is the Visibility CSS Property?
In CSS, the “visibility” property is used to control the visibility of HTML elements. Typically, it can have two values: “hidden” and “visible.”
When we set “visible” to the value of “visibility,” it displays the HTML element on the web page. When we set the value of an HTML element to “hidden,” it hides the HTML element, but it takes up space on the web page. This means it does not remove the HTML element from the web page, but hides it.
Syntax
Users can use the CSS “visibility” property by following the syntax below.
visibility: visible | hidden
In the above syntax, the “visibility” CSS property can take either the “visible” or “hidden” value.
Example
In the example below, we have a “container” element that contains three child div elements. We have set “visibility: visible” to the first and third div elements and “hidden” to the second div element.
In the output, users can observe that the second div element is invisible but takes up space on the web page.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: blue;
padding: 10px;
display: flex;
justify-content: space-around;
border-radius: 12px;
font-size: 1.2rem;
}
.first,
.second,
.third {
height: 100px;
width: 100px;
background-color: red;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.first, .third { visibility: visible;}
.second {visibility: hidden;}
</style>
</head>
<body>
<h2>Use the CSS attribute <i>visibility:hidden</i> to hide HTML elements</h2>
<div class = "container">
<div class = "first">visibility: visible</div>
<div class = "second">visibility: hidden</div>
<div class = "third">visibility: visible</div>
</div>
</body>
</html>
Example
“opacity: 0” is almost similar to “visibility: hidden” in that it also hides the HTML element but takes up space on the web page.
In the following example, a div element contains two sections. When the user clicks the first section, its opacity becomes zero. When the user clicks the second section, its visibility becomes “hidden.” Both hide the HTML element but take up space on the webpage.
However, the main difference is that an element with “opacity: 0” is interactive, in that you can try to click it multiple times and the output will be displayed multiple times. However, an element with “visibility: hidden” is not interactive.
<html>
<head>
<style>
.card {
height: 300px;
width: 300px;
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.part1,
.part2 {
Height: 45%;
width: 100%;
background-color: red;
color: white;
font-size: 2rem;
}
</style>
</head>
<body>
<h2>Using the <i>visibility: hidden and opacity: 0</i> CSS properties</h2>
<p>Click the card below to see the result</p>
<div class = "card">
<div class = "part1" onclick = "setOpacity0()">Opactiy : 0</div>
<div class = "part2" onclick = "setVisibility()">visibility: hidden</div>
</div>
<div id = "output"></div>
<script>
let section1 = document.querySelector('.part1');
let section2 = document.querySelector('.part2');
let output = document.querySelector('#output');
function setOpacity0() {
section1.style.opacity = 0;
output.innerHTML += 'Opacity : 0 <br>';
}
function setVisibility() {
section2.style.visibility='hidden';
output.innerHTML += 'visibility: hidden <br>';
}
</script>
</body>
</html>
What is the display CSS property?
The “display” CSS property controls the display of HTML elements. The display property can be “block,” “inline,” “flex,” or “none.”
When we use “none” as the value for the display CSS property, it removes the HTML element from the web page.
Syntax
You can use display:none in CSS by following the syntax below.
display:none
Example
In the example below, we have three div elements, just like the first one. We have set “display:block” to the “first” and “third” div elements and “display:none” to the second div element.
You can observe that the output removes the second div from the web page.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: red;
padding: 10px;
display: flex;
border-radius: 12px;
font-size: 1.2rem;
}
.first, .second, .third {
height: 80px;
width: 100px;
background-color: green;
border-radius: 12px;
display: flex;
color: white;
margin: 10px;
}
.first, .third { display: block;}
.second { display: none;}
</style>
</head>
<body>
<h2>Removing HTML Elements Using the CSS Property <i>display: none</i></h2>
<div class = "container">
<div class = "first">display: block</div>
<div class = "second">display: none</div>
<div class = "third">display: block</div>
</div>
</body>
</html>
Differences Between Visibility: Hidden and Display: None
Both the “visibility” and “display” properties control the visibility of HTML elements on a web page. “visibility: hidden” hides an HTML element on a web page, but it doesn’t remove the element from the web page; instead, it takes up space. However, the “display: hidden” CSS property removes the HTML element from the web page and doesn’t take up space.
Example
In the example below, we have “display” and “visible” div elements. Whenever a user clicks the “display” div element, it sets “display: none” to the div element, while the other divs move to the center, as the user can observe in the output.
Whenever a user clicks the “visible” div element, it sets “visibility: hidden” to the div element, while the “display” div doesn’t move, indicating that the HTML element with “visibility: hidden” takes up space on the web page.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: purple;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
font-size: 1.2rem;
}
.display, .visible {
height: 80px;
width: 80px;
color: white;
border-radius: 12px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
.display {
background-color: turquoise;
}
.visible {
background-color: orange;
}
</style>
</head>
<body>
<h2>Tracking the difference between visibility:hidden and display:none</h2>
<div class = "container">
<div class = "display" onclick = "setDisplay()">display</div>
<div class = "visible" onclick = "setVisibility()">visible</div>
</div>
<script>
var display = document.querySelector('.display');
var visible = document.querySelector('.visible');
function setDisplay() {
display.style.display = "none";
}
Function setVisibility() {
visible.style.visibility='hidden';
}
</script>
</body>
</html>
<html>
<head>
<style>
.container {
width: 300px;
height: 120px;
background-color: pink;
display: flex; justify-content: center;
align-items: center;
border-radius: 10px;
padding: 10px;
}
#visible, #display {
width: 120px;
height: 100px;
margin: 5px;
background-color: lightblue;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Use the CSS property "visibility:hidden" and "display:none" to check their differences</h2>
<div class="container">
<div id="display"> Click to set display:none </div>
<div id="visible"> Click to set visibility:hidden </div>
</div>
<br> <br>
<button id="reset"> Reset </button>
<script>
let visible = document.getElementById("visible");
let display = document.getElementById("display");
let reset = document.getElementById("reset");
// Add event listeners to the button
visible.addEventListener("click", function () {
visible.style.visibility = "hidden";
});
display.addEventListener("click", function () {
display.style.display = "none";
});
reset.addEventListener("click", function () {
visible.style.visibility = "visible";
display.style.display = "block";
});
</script>
</body>
</html>
This tutorial uses several examples to explain the use of “visibility: hidden” and “display: There is a difference between visibility: hidden and opacity: 0. However, visibility: hidden and opacity: 0 are similar, but HTML elements with opacity: 0 are inoperable, while HTML elements with visibility: hidden are operable.