Hiding Elements with CSS

Sometimes when you are building a layout, or you want something to appear only when you do something (like in a drop down menu when you hide the drop down items until you hover over the top-level button) you need to hide elements. You can hide elements with CSS easily. You actually have a couple of different options for hiding elements with CSS, and they both produce unique results. Let’s discuss what those two options are, what they do, and when you should be using them.

display: none;

You can set an elements display to none, which completely hides an element, but it will also hide any divs or anything else contained inside of it. When elements are hidden using this method, the layout of the rest of the document that comes after this element will l shift. The browser renders it as if the element and anything nested inside doesn’t exist. This is why this method is used in dropdown menus.

visibility:hidden;

With this method, the element is hidden, just like it is with display:none, but it’s presence is still there. Whatever the element is, it is hidden, but it’s width and height are still represented in the browser. It still affects the layout around it. You should use visibility: hidden when you want the element to be hidden, but you still want it to take up space. This will keep your layout from shifting awkwardly.

Which one do you use?

Do you have any tricks or tips to offer for display: none or visibility: hidden? These are very useful css properties to know. It is important to understand both of these methods for hiding elements. Do you have any questions about these methods? Feel free to leave your thoughts or questions in the comments section below.