Skip to content
Related Articles

Related Articles

What is the difference between visibility:hidden and display:none ?
  • Last Updated : 25 Jun, 2020

Both of the 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 and display: “none” property is used to specify whether an element is exist or not on the website.

Syntax:

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 exists in the HTML page whereas visibility: “hidden”;, just makes the tag invisible it will still be on the HTML page occupying space it’s just invisible.

Example:




<!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>
    </cenetr>
</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.

Javascript syntax for display and visibility:

  • display = “none”;
    document.getElementById("Id").style.display = "none";
  • visibility = “hidden”;
    document.getElementById("Id").style.visibility = "hidden";

Example:




<!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>
          
        <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:

In the above when the display button is clicked the whole page shifts upwards occupying the space of the deleted div tag while when the visibility button is clicked it doesn’t as the div still exists in invisible form.

My Personal Notes arrow_drop_up
Recommended Articles
Page :