Forem

Deepak Yadav
Deepak Yadav

Posted on

2 2

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.

Main img

Step:2

Now apply display: none; property to Green color circle

#green{
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

display: none; img

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;
}
Enter fullscreen mode Exit fullscreen mode

visibility: hidden; img

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 👇.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More