Until last wednesday, I was really confused about the functionality of
display properties. Then Shidhin spend some time, explained and make me understand what are the difference between those.
In this post, I am trying to summarize the difference between
Using the visibility property in CSS, we can toggle the visibility of an element using the values
visible. If we make the the element hidden, it will be hidden from the user and user can’t access it’s child, but still in the DOM,
the space of the element will be consumed.
In the demo above, You can see a box below the text visibility.The box look like a rectangle even the child element is given
visibility:hidden proves that it still consumes the space on DOM.
If we use
opacity:0 to hide an element, in the fist look it looks like hidden, but still the user
can access the child element. It also
consume the space of the element in the DOM.
In the above demo, you can try mousehover on the box just below the text opacity. You can see that the curson turns to pointer. Its because there is a link inside that box, which will open
google.com in a new tab. Now go ahead and try a click, hooray a new tab opens even though its parent is not visible to our eyes.
If we use
display:none, the browser will consider as if the element is not available in the DOM as the result it won’t consume the space.
In the demo above, you can see that the box below the text display is turned into a line and when you try to comment the
display:none in the CSS panel it truns back to normal rectangular box.