Giters

cheatsheet1999 / FrontEndCollection

Notes for Software Engineers on infrastructure and distributed systems. Covers common data structure and algorithms, web concepts, and more!

Repository from Github https://github.comcheatsheet1999/FrontEndCollectionRepository from Github https://github.comcheatsheet1999/FrontEndCollection

What is the difference between display:none and visibility:hidden style?

cheatsheet1999 opened this issue · comments

commented

They all make elements invisible.

But

  • visibility: hidden hides the element, but it still takes up space in the layout. display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
  • display: none cannot be inherited.
  • display: none will adjust the spaces, thus automatically aligns the text following it to cover the space, but in case of visibility: hidden space remains intact.