Visibility: hidden and display:none

What’s the difference between display: none; and visibility: hidden; ?

So, the difference between display: “none”; and visibility: “hidden”; , right from the name itself we can tell the difference as display: “none”; , completely gets rids of the tag, as it had never exists in the HTML page whereas visibility: “hidden”; , just makes the tag invisible it will still be on the HTML page occupying space it’s just invisible. [source]

i simply googled: css hidden vs none

And this result came up. Using google (or whatever SE you prefer) to find documentation is a good thing :slight_smile:


Ok Ok I see, thank you. But what exactly do you use display:none; for? Why not comment out what you want out of the document? Or is it a matter of preference?

Have you learned JavaScript yet?

anyway, JS makes things more dynamic (we can trigger events for buttons, change css properties of an element and more)

so this allows you to make a button to toggle an element, which when the button is clicked, change another element from display: none to display: block for example. So now we have an element we can show when we want to

this won’t work when the element is just a comment.