Not too long ago I was asked in a semi-professional setting if I was confident in CSS. My answer was that I knew the basics, but it’s much easier when you're in an IDE environment and have autofill to help along the way if you’re not entirely sure how to reference something. I figured I’d be able to answer the question being tossed at me without having to dig too deep. The question was: did I know the difference between display: none and visibility: hidden? Nope, actually I had never even come across visibility: hidden and wasn’t well-versed enough to fully explain what display: none did other than not display something (but that piece is pretty obvious from the name). So I set out to figure out what each of these meant and what the difference between is. They both make an HTML tag invisible but in different ways.
Display: none- is commonly used with JavaScript to hide and show elements without deleting and recreating them. This option completely removes an element from the page. Meaning, it won’t appear on the page, doesn't take up space, it’s like it doesn’t exist.
Visibility: hidden- also hides an element however, the element will still take up the same space as before. The element will be hidden, but still affect the layout. While the element is not visible as with display: none it won’t appear on the site page but where it differs is the element does still take up the space it would have if it weren’t hidden.
Because I’m still kind of wrapping my head around these two CSS properties, I don’t have any test cases for when they’d be put into practice. If you’ve used either of these please feel free to let me know which and why you used it. There are some good visual examples on MDN if you want to check those out here:
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Top comments (0)