Hiding stuff

There are three ways to hide an element in CSS:

1. display:hidden

Using display:hidden removes an element from the layout completely. It doesn’t take space on the page.

Pros:

It removes an element from the layout completely. It doesn’t take space on the page.

Cons:

If used, then you must “remember” what the actual display type is for when you want to show the element.

It can also cause your layout to “jump around” when the element is added or removed unless you have static sizes defined.

2. visibility:hidden

Using visibility:hidden hides the element but it does not remove it from the page layout. You cannot interact with elements with visibility set to hidden.

Pros:

It does not cause elements to “jump” as the element is still there, still takes space on the page, it’s just that you can’t see it.

Cons:

If you want the element to be removed completely, then this will not work for you as it still takes space.

Workaround:

Setting width:0 and height:0 will have the same effect as display:none – it will take the element out of the page layout (actually, it is still in the page layout, it’s just that it has no width or height and, as such, appears to have been removed). The trade-off is, if you have a defined width or height, then these must be “remembered” in order to restore the element.

3. opacity:0

Setting opacity to 0 has the same effect as visibility:hidden – it is removed from sight but still takes space on the page, however, unlike elements with visibility set to hidden, you can interact with elements with opacity set to 0.

Pros:

Not exactly “hiding” the element, opacity can also be used for its intended purpose: to make an element partially visible. This is particularly handy for creating an element to cover another element and to “dim” it (like a black screen under a popup window) by setting the value to 0.5 or 50%, for example.

Cons:

Same as visibility:hidden. The same workaround can be used.