(+44) 0 800 689 3652 - Call us Mon-Fri 9:00am - 5:00pm or request a call back

Our new Turnkey Solutions with Webmaster Packages start at only £895+VAT - Click Here!

Visibility: Hidden vs Display: None

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 different 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

Main text

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.

I need more help!

Never fear! Help is here! Get in touch if we can help you with any of your on-line needs!


Pin It on Pinterest

Share This

Spotlight Studios

Contact Us
Sending