CSS Visibility: Everything You Need to Know

With so many different CSS properties, it’s understandable if you can benefit from a refresher every so often. One must-know property is CSS visibility. Today, we’ll walk you through everything you need to know about it.

From an overview of the property itself to the differences between visibility and display to an example, you’ll be well-equipped to use this property seamlessly the next time you encounter it. 

What is CSS Visibility? 

Visibility is a property in CSS that designates whether or not a specific element is — you guessed it — visible. It’s also important to remember that hidden properties still take up space on your website pages — and there’s a different property to use if you want to hide and remove it from the document. (More on that later.) 

If you use the CSS visibility property and set your element to hidden, it is no longer visible, but there is still room allocated for it. Therefore, you’re hiding the element from your view, but it’s still accessible in the page flow. That means the layout of the document won’t be altered.

Let’s walk through the different property values. 

CSS Visibility Property Values 

As mentioned, you can use this property to adjust an element’s visibility. Here are the different property values you should know. 

• Hidden: You have successfully hidden the element. (Remember: There’s still space on the page for it!) 

• Visible: This is the default setting. The element is visible. 

• Initial: This property is set to its default value. 

• Collapse: You only use collapse for table rows, columns, row groups, and column groups. If you try to use this on a different element, it will display as hidden. 

• Inherit: It inherits the property from a parent element. 

CSS Visibility vs Display: What’s the difference? 

We briefly mentioned that there’s often a comparison drawn between CSS visibility vs display. Let’s run through what distinguishes the CSS visibility property from display. 

First, let’s discuss the display property. You can use display for a variety of purposes in CSS. The form of this property that parallels CSS visibility: hidden is display: none. 

The element isn’t on the page if you use display: none. The tag is removed from the page flow so other elements can fill it. In other words, space isn’t reserved for the element with this property. This is the main difference between CSS visibility vs display. If you use visibility: hidden, the element is hidden and there's room for it. If you use display: none, there will no longer be space on the document. 

However, it’s important to note that display is capable of many things — for instance, you don’t have to stick with display: none. This property specifies the element’s display behavior. Some other popular options include display: block or display: inline. 

CSS Visibility Example 

Now that you know the CSS visibility property, let’s walk through an example. 

Let’s say you want to make an element invisible but want to save its allocated space on your page. 

In that case, you’d use the CSS visibility: hidden.

Say you are looking to hide an H3. Here’s the code you’d use to do so: 

Let’s say you have another H3 you want to display. 

Visibility: A Powerful CSS Element 

Now that you know how to use CSS visibility to change whether or not you can view an element, you’re ready to start customizing your pages.