Difference betweet style.visibility and style.display [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

What is the difference betwee开发者_如何学Pythonn visibility:hidden and display:none

I am looking at examples to hide/show div tags using JavaScript. In some examples, they use visibility and in some display.

e.g.

document.getElementById("divhotel").style.visibility = "hidden";

vs

document.getElementById("divhotel").style.display = "none";

What is the difference between the two?

---

When you set visibility to hidden, the element is not shown but still takes up the same space on the page.

When you get display to none, the element is neither shown nor does it take up any space on the page.

More often than not I find myself using display, but it depends on what your scenario demands.

---

visibility is how the element is rendered, the block where it exists is still laid out regardless of the value. Items might be pushed around because of that. display is how it is rendered to the page: block is div type elements, with a full box models; none element isn't rendered to the page at all; inline is an inline element such as a span or anchor tag.

---

Ah, beloved Google.

"style.visiblity makes the element visible or hidden, it is still rendered and takes up space on the page even if you can't see it. If you set style.display to "none" the markup is not processed and does not take up space on the page."