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

visibility:hidden

       -will only hide the content,css but not the space covered by the element.

display:none

      -will hide both the content,css and space covered by that element.

Example:

<html>
<head>
    <style>
        #id2 

        {
            visibility:hidden;
        }
        .class2 

        {
            display:none;
        }
        #id1,#id2,#id3 

        {
            background:#ea6645;
        }
        .class1,.class2,.class3 

        {
            background:green;
        }
    </style>
</head>
<body>

<div id='id1'>First div with attribute ID1</div>
<div id='id2'>Second div with attribute ID2</div>
<div id='id3'>Third div with attribute ID3</div>
<div class='class1'>First div with attribute class1</div>
<div class='class2'>Second div with attribute class2</div>
<div class='class3'>Third div with attribute class3</div>

</body>
</html>

Output:

First div with attribute ID1                                                                                                                         

Third div with attribute ID3

First div with attribute class1

Third div with attribute class3