CSS Properties: Display vs. Visibility

Question

What is difference between Display vs. Visibility properties?

Answer 1

display: none removes the element out of the flow of the html whereas visibility:hidden does not.

Answer 2

The visibility property only tells the browser whether to show an element or not. It's either visible (you can see it), or invisible (hidden - you can't see it).

The display property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline element (i.e. it flows with text and other inline elements) or a block-level element (i.e. it has height and width properties that you can set, it's floatable, etc), and some others (table, table-row, table-cell, etc).

Note that if you set an element to display: block but also set visiblity: hidden, the browser still treats it as a block element except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box.

In other words, this means elements with display that isn't none still affect the flow of elements in a page. Conversely, as others have said, display: none effectively removes the affected element from the DOM, which is why it'll seem that an element with that style is nonexistent to the browser.

Answer 3

display:none; will remove the DOM element in question completely from the hierarchy of elements on the page, whereas visibility:hidden; will not remove the element, but simply hide it. So a div occupying 300px of vertical space in your DOM will STILL occupy 300px of vertical width when set to visibility:hidden; but when set to display:none; it is removed from the document and the space is then "freed" up for lack of a better word. That element now occupies zero space in your document.