Within CSS what is the difference between opacity:0 and display:none? [duplicate]

Answer 1

They will both make the text invisible, but display: none; will make it look like it never existed, where opacity:0.0; filter:alpha(opacity=0); will make it look like something is just missing.

For instance.

---

display: none;

This is text
<div style="display: none;">This test is invisible</div>
This is more text

will display as

This is text
This is more text

---

opacity:0.0; filter:alpha(opacity=0);

This is text
<div style="opacity:0.0; filter:alpha(opacity=0);">This test is invisible</div>
This is more text

will display as

This is text

This is more text

---

Make sense?

Answer 2

Opacity affects the transparency of the object.
Display affects how the object is rendered in the web browser.

For example:

 This text is here!
 <div style="opacity:0">
 This text will be invisible
 </div>
 this text will be here

this (to the user looking at it) will make it seem like "this text is here!" and "this text will be here" have a line break between them.

and this example:

This text is here!
<div style="display:none">
This text will be invisible
</div>
this text will be here

this (to the user) will make it seem like the two visible lines are directly on top of each other with no space in between.

In JQuery, a fade in or fade out will change the Display from "none" to "block" and visa versa for the other, respectively. It will also animate the opacity from 0 to 1 smoothly within the allotted time, again visa versa for the other.

Answer 3

display: none lets the element disappear. Just like it isn't present. This means your layout may change.

opacity: 0 this one just makes your element invisible. It doesn't take any effect on your layout.

Answer 4

display: none is like an object was removed from the page, opacity: 0 or visibility: none both keep the object on the page but just makes everything clear and leaves an empty space where it was. When it's opacity: 0 you can still click on it, but i don't think the same for visibility: none.

Answer 5

Both cases make the element invisible, but properties are different:

• opacity: 0 : invisible, but takes display space (affect the layout), and clickable
• display: none : invisible, doesn't take display space, and hence not clickable

Let me add a third one that is relevant in this context:

• visibility: hidden : invisible, takes display space, and not clickable

I have made an demo JSFiddle here: http://jsfiddle.net/sebastien_worms/tCbJD/

Answer 6

opacity:0 will still allow click, hover, and other mouse events on the element. It just won't be visible to the user.

display:none does what it implies—the element still exists but is completely not visible, as though it's width and height are 0.