visibility: hidden; display: none; opacity: 0.0;

What is the difference between these css properties?

    1 answer 1

    visibility: hidden
    hides the element, but it can still participate in the location of html elements, i.e. he is, but he is not visible.

    opacity: 0.0
    about the same, only to the same CSS3 property i. not cross-browser.

    diplay: none
    The element is not displayed and does not affect the display of visible elements.

    • The difference between opacity and visibility is that opacity is transparency, you can set a specific value. - metazet
    • Here the parameter 0.0 KagBy is specified, and opacity: 0.0 is about the same as visibilite: hidden, but it doesn't work everywhere, any more questions? - Zowie
    • I have a panel. And I need to get its width, not displaying the panel itself. So, the width can be defined only if the panel is attached and with the property opacity:0.0 or visibility:hidden , but with diplay:none width of the panel is always zero (this is all about IE9). Therefore, I would like to know if there are any jokes with these properties. - angry
    • So, the difference is only in cross-browser. - angry
    • You asked a question and received an answer, above you did not describe what you need. To solve this problem, if visibility: hidden interferes with the location of the elements, then you just have to position it absolutely, so the element will not affect the width and you can find out the width. - Zowie