Today I ran into some issues with hidden elements and the visibility CSS attribute on a project I was working on. The elements were not visible but they were still taking up space in the layout.
Which started me wondering what exactly is the difference between the display and visibility properties in CSS? To the casual observer whilst they appear to accomplish they same thing they do not.
visibility: hidden;
Hides the element from view but the element will still take up room in the page layout.
display: none;
Hides the element completely with it not taking up any space in the page layout.
Simple enough mistake and one I am likely to make again at some stage in the future.
More Reading: