Difference between display none vs visibility hidden

Display: none and Visibility: hidden are css properties that hides element so how do they differ?

display: none property hides the element and hidden element does not occupy space in the layout. Any adjacent element will take up the space of hidden element.

visibility: hidden property also hides the element but the hidden element still takes the same space in the layout. This means element will be invisible but the layout will remain the same.

Let me illustrate with an example.

HTML

<div class="container">
        <div class="none">
            <h2>Display None</h2>
            <img src="rocket.jpg">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Ipsa blanditiis saepe nostrum repellendus, adipisci dolorum
                delectus, molestiae quia incidunt odit temporibus 
            </p>
        </div>
        <div class="hidden">
            <h2>Visibility Hidden</h2>
            <img src="rocket.jpg">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Ipsa blanditiis saepe nostrum repellendus, adipisci dolorum
                delectus, molestiae quia incidunt odit temporibus 
            </p>
        </div>
    </div>

CSS

html{
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
     width: 80vw;
    display: flex;
    justify-content: space-between;
}
h2{
    text-align: center;
}
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
p{
    text-align: center;
}
.none{
    padding: 0 15px;
    flex-basis: 45%;
    border: 2px solid #000;
}
.hidden{
    padding: 0 25px;
    flex-basis: 45%;
    border: 2px solid #000;
}

This gives us.

Now let’s examine the difference between display: none and visibility hidden.

Now let’s add following property to class .none image.

.none img{
    display: none;
}

You can see that image is hidden and does not occupy any space in the layout. Paragraph below the image occupies the space previously occupied by it.

Now let’s add visibility:hidden property to class .visibility image.

.hidden img{
    visibility: hidden;
}

Image is hidden but it is still taking up it’s allocated space in the layout. Therefore the paragraph below the hidden image does not move up.

In Conclusion

Display:none property hides the element and removes it from the layout.

Visibility:hidden hides the element and does not remove it from the layout.