Yogesh Chauhan's Blog

What’s the difference between visibility: hidden and display: none?

in CSS on July 25, 2021


The display property tells browser if the element should be displayed or not.

When the display property is set as none, it tells browser not to display the element.

When you do that, the element won’t exist in the display area at all.

The space won’t be allocated and other elements will be shifted in the place for that element.

display:none behaves like the element is not there and displays the rest of the page. That is called destroying the rendering state of the element.

visibility: hidden

The visibility property tells browser if the element should be visible or not.

When the visibility property is set as hidden, the element takes its place in the view but it’s just not visible on the screen.

Basically, visibility: hidden hides the elements but keep the element’s rendering state.

You can also click on the element if it’s a link even if the visibility is hidden.

You can update the rendering state of the element while it’s hidden.


A mixed solution for better rendering

content-visibility: hidden is a better solution if you’re looking for a solution to improve a page speed by hiding elements temporarily.

content-visibility: hidden hides the element but keeps the rendering state. So, even if you make changes, the changes will be applied when the element is shown again.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to make a web page look good on any device?HTMLHow to create a circle that follows a cursor using JavaScript and CSS?CSSHow to install Gulp with WordPress?WordPressCSS backface-visibility PropertyCSS3 Types of Arrays in PHPPHPGap in Flex?CSS