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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
The difference between isFinite() method and isFinite() function in JavaScriptJavaScriptWordPress get_posts ExamplesWordPressHow to display random posts in WordPress?WordPressDid you get an error while displaying Special Characters in JavaScript?JavaScript5 Ways to Loop Through JavaScript ArraysJavaScriptHow to vertically and horizontally align text and image block (without flex or grid) in CSS?CSS