DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Kurapati Mahesh
Kurapati Mahesh

Posted on

CSS: visibility:hidden vs display:none

Frequently asked interview question.

display:none - Won't allocate space on the page.
visibility:hidden - allocates space on the page.

-> Both aren't visible on the page
-> Both are visible and trackable via DOM.

See below images for more clarification:

Image description

Image description

Thanks.

Please add your any further thoughts via comments.

Follow: https://twitter.com/urstrulyvishwak

Top comments (2)

Collapse
 
getsetgopi profile image
Gopinath Prasanna

visibility: hidden is used mainly for accessibility content which is read by screen readers.

Collapse
 
jasha profile image
Jasha Chec

Very nice article. Thanks it helped a lot.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›