How to Hide Elements with CSS
This is a memo on how to hide elements with CSS. Using display: none; completely removes the element, which can break the layout. Here, we’ll introduce how to make elements invisible while maintaining the layout.
The Problem with display: none;
When you use display: none;, the element completely disappears, so other elements try to fill that space, which can break the layout.
Alternative Methods
I tried various CSS properties to make elements invisible, but some methods didn’t work well.
background-color
background-color: rgba(255, 255, 255, 0.1);I tried making the background color transparent, but the element itself remained, and it had no effect.
color
color: rgba(255, 255, 255, 0.5);I tried making the text color transparent, but this also had no effect.
The Optimal Method: visibility: hidden;
Finally, I was able to make the element invisible with the following method:
visibility: hidden;When you use visibility: hidden;, the element is not displayed, but the space remains. This allows you to make the element invisible without breaking the layout.
As shown above, when hiding elements with CSS, you can use visibility: hidden; to make elements invisible while maintaining the layout.