The main difference between display:none and visibility:hidden in CSS

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

In CSS, the display:none and visibility:hidden properties can often confuse developers when stylising their websites. As such, the two properties are often led to believe they work the same day, just with different names.

I’m afraid that this is not the case! To see the differences, I’ll go ahead and provide some code snippets to help see where and how it can be used on your projects.

Utilizing visibility:hidden

Using this property will only hide the element from the document. It’ll still remain in the document. However, they will take up space within the layout.

Here’s some code snippets that’ll show this in action:

CSS

A0F5B18F-838C-4CF4-8719-BAAED0A45C1D.jpeg

HTML

CDB52C67-81D5-4447-B933-7696362B6F37.jpeg

Result

3AA4F12E-78E2-4E33-9114-F7F79806AC2C.jpeg

Utilizing display:none

With the display property, it’s sole purpose is to tell the page how the elements should be displayed. You may be familiar with other options such as display:inline and display:block.

Using display:none will hide AND remove the element from the document. This type of property is often used with JavaScript when working with DOM cases that requires hiding and removing elements on the page. It will not take up any space on the page.

Here’s some code snippets that’ll show this in action:

CSS

87F217C5-4523-452E-92C5-E8A9147B45FF.jpeg

HTML

9A76BBB1-4F1F-4565-BF79-0C5519D5A134.jpeg

Result

2299A4B3-C5E6-430E-AA7A-85D02097E461.jpeg

I hope this helps explains the differences! If you wanna see more web design tips, be sure to follow my blog and my Twitter account for more coding adventures.

Comments (2)

Vivek Tiwari's photo

Great article, Diana Chin.

Diana Chin's photo

Thanks so much!