This content originally appeared on DEV Community and was authored by Deepak Yadav
Coding is all about practical knowledge, so let's understand difference between display: none; and visibility: hidden; property practically 😍😍.
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 👇.
This content originally appeared on DEV Community and was authored by Deepak Yadav
Deepak Yadav | Sciencx (2022-04-07T10:03:05+00:00) Display: none Vs Visibility: hidden. Retrieved from https://www.scien.cx/2022/04/07/display-none-vs-visibility-hidden/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.