DEV Community

Umapreethi Santhanakrishnan
Umapreethi Santhanakrishnan

Posted on

Difference between display:none and visibility:hidden

#100daysofcode #css

The display property helps us to specify the display behavior of an element.

Difference between display:none and visibility:hidden

We can hide elements using both properties but there is a difference between them.

Let's say we have three balls in red, green and blue color.

Css code

If I set display:none for the green ball.

#green {
  background-color:green;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Now, our green ball is removed, but it still exists on HTML structure and display:none property makes it look like deleted. The blue ball moved up and took the green ball place.

Let's see what happen when we set visibility:hidden for the same green ball. 

#green {
  background-color:green;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  visibility: hidden;
}
Enter fullscreen mode Exit fullscreen mode

visbility:hidden property does not remove the green ball, makes it invisible

Top comments (1)

Collapse
 
lorenzoblog profile image
Lorenzo •

Hello, wrote an article on the same subject, maybe someone is interested.
@umapreethidev don't hesitate to leave a comment yourself linking to this article, it could be useful as it is an in-depth study of something I am only talking about.

devlorenzo image

JS: Finally discover how to Hide and Show elements

DevLorenzo ・ Feb 28 ・ 2 min read

#javascript #tutorial #webdev #codequality