Display: none Vs Visibility: hidden

Coding is all about practical knowledge, so let's understand difference between display: none; and visibility: hidden; property practically 😍😍.

👀My GitHub
👀My Insta

step:1 Let's make three circle with different color i.e. Red, Green, and Blue.

Step:2

Now apply display: none; property to Green color circle

#green{
    display: none;
}

display: none; means that the tag will not appear on the page at all (although you can still interact with it through the Dom). There will be no space allocated for it between the other tags.

Step:3

Now apply visibility: hidden; property to green color circle

#green{
    visibility: hidden;
}

visibility: hidden means that unlike display: none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

Hopefully you find this useful.
Share your thoughts in comment section 👇.