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

Answer 1

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/