Visibility: hidden vs. Display: none
Visibility isn’t a super commonly used CSS property. It serves a purpose, but usually that is when you want to make something disappear without disrupting your layout. For my purposes with this past project, I was trying to move new things into the space that the now “hidden” element was taking up.
Here’s an example of how we started. Everything is set to visible.
Here’s how this text would look if we didn’t want to render the image and set it to “Visibility: hidden”:
As you can see, the image may not be visually there, but the footprint of it still is.
The desired look is above. The image is set to display:none. It never gets rendered into the Render Tree. The content next to it flows like it doesn’t exist. This is easy to see when the example is so simple, but not so easy when you’re jugging multiple elements, margins, floats and grids.