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!


Beehive Lofts
Beehive Mill
M4 6JG


Richmond Road


Coworking Spaces
Coffee Shops
Br1 1AA

Request an Information Pack

Raise a support ticket

Request a call-back

Just leave your name and number and we'll get back to you as soon as we can.

Contact us

How can we help?

Copyright © Spotlight Studios
Powered By Spotlight Servers

Spotlight Studios Ltd, Beehive Lofts, Beehive Mill, Jersey Street, Manchester, M4 6JG
Registered in England and Wales.
Company Number: 07829328
VAT Number: GB131434942