Difference between visibility and display property

What the difference between visibility and display property of css ?

In css both visibility and display property use to show or hide html element but there is a major difference between these two properties are space of elements.

When we use visibility property to hide a html element it will only hide the element but the space for that element will also present int that position, in simple word space not hide from visible part.

At the same way if we use display property to hide that html element it will also remove the space for that element.

Example of Visibility property is bellow:

h2.hidden {
    visibility: hidden;
}

h2.hidden {
    display: none;
}