What are the various ways to hide a ?

Question

Right, I am a CSS noob. I am trying to collate the various ways to hide a div.

For example:

display:none;
visibility:hidden;

Are there

Answer 1

Several possibilities:

• display: none - This will cause the browser to not render it. It would also make it completely vanish from screen readers as well, so beware.
• visibility: hidden - This will cause the browser to render it, it wouldn't be visible, but would leave a space corresponding to the element's size.
• position: absolute and the send it to a ridiculous location (for example, left: -99999px; assuming parent's overflow isn't set to auto or scroll). - This works well when you want the element not actually visible, but still exist in the source or the DOM.
• Set width and height to 0, and ensure overflow: hidden - Same as above, the element would be completely invisible, but still exist at the DOM or source.
• opacity: 0 - Would achieve the same effect of visibility: hidden only through different means (i.e. changing the actual opacity of the element).

---

Now this all depends on why you need it.

• Do you want to make the element completely disappear? display: none (and making it reappear with display: block) is your choice.
• Do you want to animate it? Going with opacity: 0 or width&height is probably a better choice, perhaps with some JavaScript.
• Want it to be accessible to screen readers, but not actually visible (for example, hidden image captions?), going with position: absolute; left: -99999px works well.