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

HTML

Result

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

HTML

Result

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.