DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

4 1

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
GP

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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more