What is the difference between visibility:hidden and display:none ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.