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:

Thanks.

Please add your any further thoughts via comments.

Follow: https://twitter.com/urstrulyvishwak

Comments

[GP]

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

[Jasha Chec]

Very nice article. Thanks it helped a lot.