DEV Community

Takuya Kikuchi
Takuya Kikuchi

Posted on • Updated on

Hide an element without changing the layout

What is visibility css property

visibility: hidden

visibility - CSS: Cascading Style Sheets | MDN

The visibility CSS property shows or hides an element without changing the layout of a document.

When I found it useful

When I wanted to keep the layout and did NOT want to have a hover effect on the element

codesanbox

Discussion (4)

Collapse
willtrout profile image
Matt Willtrout

And if you do want reflow, set the size to 0 percent

size: 0%

Collapse
takuyakikuchi profile image
Takuya Kikuchi Author

Thanks for your comment!

But, sorry I need some follow-up information here 🙇🏻‍♂️
Could you tell me what you meant by 'reflow' or please share a link that I can refer to.

Thanks!

Collapse
willtrout profile image
Matt Willtrout

normally, when you add or remove an element; the browser will rearrange(reflow) the page layout. Sometimes this is what you want; other times it is not

Thread Thread
takuyakikuchi profile image
Takuya Kikuchi Author

Thank you for explaining that!