Both the visibility & display property is quite useful in CSS. The visibility: “hidden”; property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. The visibility is a property in CSS that specifies the visibility behavior of an element. The display property in CSS defines how the components( such as div, hyperlink, heading, etc) are going to be placed on the web page. The display: “none” property is used to specify whether an element exists or not on the website.
Visibility property: This property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document.
Syntax:
visibility: visible| hidden | collapse | initial | inherit;
Property Values:
- visible: It is used to specify the element to be visible. It is a default value.
- hidden: Element is not visible, but it affects layout.
- collapse: It hides the element when it is used on a table row or a cell.
- initial: It sets the visibility property to its default value.
- inherit: This property is inherited from its parent element.
Display property: The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page.
Syntax:
display: none | inline | block | inline-block;
Property Values:
- none: It will not display any element.
- inline: It is the default value. It renders the element as an inline element.
- block: It renders the element as a block-level element.
- inline-block: It renders the element as a block box inside an inline box.
So, the difference between display: “none”; and visibility: “hidden”; right from the name itself we can tell the difference as display: “none”; completely gets rids of the tag, as it had never existed in the HTML page whereas visibility: “hidden”; just makes the tag invisible, it will still on the HTML page occupying space it’s just invisible.
Example: This example illustrates the use of the visibility property & display property in CSS.
<!DOCTYPE html> <html>
<head>
<title>
Difference between display:"none"; and visibility: "hidden";
</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
display:"none"; and
visibility: "hidden";
</h3>
<div class="display">
<b>
display:
<span style="display:none">
display:none
</span> "none";
</b>
</div>
<br>
<div class="visibility">
<b>
visibility:
<span style="visibility:hidden">
visibility:hidden
</span> "hidden";
</b>
</div>
<p>
You can see that the display: "none";
don't have any blank space and
visibility: "hidden": has the blank space.
</p>
</center>
</body>
</html>
|
Output: In the visibility span, the tag still exists as you can see space between, whereas as display got rid of the tag.
Display and Visibility in JavaScript:
Syntax:
display = “none”;
document.getElementById("Id").style.display = "none";visibility = “hidden”;
document.getElementById("Id").style.visibility = "hidden";Example: This example illustrates the use of display property & visibility property in Javascript.
<!DOCTYPE html> <html>
<head>
<style>
.container {
width: 800px;
height: 200px;
border: 2px solid black;
}
.right {
float: right;
margin: 10px;
}
.left {
float: left;
margin: 10px;
}
#geek {
width: 200px;
height: 55px;
background-color: yellow;
}
#geek1 {
width: 200px;
height: 55px;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>
Effect of <code>display:"none"</code>
and <code>visibility="hidden"</code>
</b>
<br>
<div class="container">
<div class="right">
<div id="geek1">
On clicking the below button this div
tag still exists but invisible.
</div>
<br>
<button onclick="visibility()">
visibility="hidden"
</button>
<p> This line will be still and won't go up as the
<br>above div tag still exists but invisible.
</p>
</div>
<div class="left">
<div id="geek">
On clicking the below button this div tag won't exist.
</div>
<br>
<button onclick="display()">display="none"</button>
<p>This line will go up as the above div tag none.</p>
</div>
</div>
</center>
<script>
function display() {
document.getElementById("geek").style.display = "none";
}
function visibility() {
document.getElementById("geek1").style.visibility = "hidden";
}
</script>
</body>
</html>
|
Output: From the below output, when the display button is clicked then the whole page shifts upward & occupying the space of the deleted <div> tag while when the visibility button is clicked, it doesn’t shift as the <div> tag still exists in invisible form.