The "display" and "visibility" CSS Properties; An Overview

There are two ways to make content disappear and reappear.

One method shifts remaining content around to close up the area where content was made to disappear. Then it shifts around again to make room when the content reappears.

The other method leaves the space blank where the disappeared content had been. Then fills the space when the content reappears.

The two CSS properties are display or visibility.

Let's get right to the demonstrations.

Rectangular blocks like these will be used for demonstrating the two CSS properties. The red, green, and yellow blocks will be made to disappear and reappear.

Demonstrating the display Property —

Click the button to toggle the disappearance and reappearance of the red, green, and yellow blocks.

As you toggle the display property, making the red, green, and yellow blocks disappear, the rest of the blocks shift around to fill up the space thus vacated. And when it's toggled again, the blocks shift around to make room for the reappearing blocks.

Demonstrating the visibility Property —

Click the button to toggle the disappearance and reappearance of the red, green, and yellow blocks.

As you toggle the display property, making the red, green, and yellow blocks disappear, the space the disappeared blocks occupied remains blank. And when it's toggled again, the blocks reappear in the spaces they had vacated and were being kept open for their return.

When to Use Which

The use of the display property can be annoying if it's used a lot, especially if it's unanticipated. Every time something disappears or reappears, content is shifted around and the eye has to refocus on the page.

Yet, the display property is likely to be preferred for large areas of content — so the large areas don't remain blank when the content isn't published. Toggling the individual answers to questions on a Q&A or FAQ page, are examples. Suggestions or tips made available only on demand is another example.

The use of the visibility property is often preferred for small content items, where small vacant areas are acceptable and shifts in surrounding content are likely to dispense gratuitous annoyance. A submit button that disappears to prevent multiple clicking is an example. Once-sentence help is another.

The focus of this article is to provide demonstrations and an overview so you can make better informed choices for your web pages.

Techical details about display and visibility have been written about before in the Which to Use? display or visibility CSS Property article (Willmaster Library). It is a good resource for technical details about the two properties.

There is also A Short CSS 'display' Property Tutorial that focuses on the display property. The display property has many, many more options than the visibility property.

Much can be said about the two CSS properties. With this article and the two linked above, there is a lot of information.

(This article first appeared in Possibilities newsletter.)

Will Bontrager