These two style properties do two different things.
Visibility: hidden hides the element, but it still takes up space in the layout. In other words, if you place a DIV and give it dimensions to take up 100×100 pixels, the visibility: hidden property will make the DIV not show on the screen, but the text following it will act like it's still there.
Display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. In this example, the text following the DIV would move over as if the DIV had been removed from the HTML.
Posted in: CSS