Visibility: Hidden vs Display: None

21st April 2015

We have come across a few sources in the past few weeks, some plugins and some scripts that we have needed to edit in order to correct formatting irregularities.

The problems have occurred when certain elements within a web page need to be hidden, but not removed from the site. A common example of this is when you have a chunk of information that only becomes visible when you click on a button, or when a script writes empty containers into the site to be used separately.

The two most common ways to do this are to use either: visibility: hidden or display: none.

Similar.. but not the same.

They are both CSS properties that can be applied to elements to hide them or stop them displaying.

visibility: hidden – This tag hides the element’s contents, think of it as making the element invisible.

display: none – This tag stops the element from being displayed.

So what is the difference?

The difference is essentially that when you use visibility: hidden the element is invisible but not gone – the spacing of the element will still be there. When you use display: none

the element is never rendered at all so any space that would have been taken up is also removed.

You can see an example of this on the right:

No Style

Main Text

Some other Text

visibility: hidden

Main Text

Some other Text

display: none

Some other Text

Which one should I use?

They both have there merit depending on the desired effect – if you are hiding an element but want the rest of the page to appear the same whether it is visible or not then visibility: hidden will maintain the element space and preserve the page formatting.

You can also use the above elements inline for example: <div style=”display: none”>// your content here </div> which is particularly useful when you are embedding scripts directly onto a page.