Differences Between Display and Hidden Style Properties

Two different CSS properties can be used to make a page element disappear: display and visibility. What is the difference between the two? This page is designed to provide a concrete demonstration. In this example, the headings below will appear and disappear. But you can apply the same technique to any page element -- images, paragraphs, even whole div blocks.

Hiding elements using visibility

The visibility property can be used to cause an element to be hidden from view. The object is still incorporated into layout decisions, so that hiding it will not cause any page elements to move. Space is left within the surrounding elements for the hidden element. Click this button to demonstrate:

Hiding elements using display

The display property can be used to remove an element from the layout. The object is not incorporated into layout decisions, so that changing display to none it will usually cause page elements to move and reformat themselves. The space where the undisplayed element would have been is closed up as though the element does not exisr. Click this button to demonstrate: