visibility:hidden vs. display:none

Many new Developers don’t understand the difference between these two attributes which can be applied just about anywhere on a page.

{visibility:hidden} Will make the element transparent but the element will still occupy the same space as if it were still there and if it’s a link it will remain active and clickable.

{display:none} Will make the element completely disappear from the page and will collapse the space once occupied by it. It is used a lot in responsive design to strip away images when a site is displaying on a phone.

Submit a Comment

Your email address will not be published. Required fields are marked *