Major difference between display: none and visibility:

December 2016



There are two attributes that you can use in your webpage, using CSS, to hide the display command in a web browser of an element that has been added in a CSS document. These attributes are display: noneand display: hidden . These attributes do not have the same function however

display: none will completely remove the element from the display, that is, it will not consider that the element will be there at all. For example:

#comment
display: none


will not display the comment that has been added to the CSS file. Hence the text will be pulled up, as if no text area was never used before in the document.

display: hidden will only hide the part of the element that had to be displayed. Hence, the program will consider that the text is there and will only hide it.

#comment
display: hidden


will leave a blank space where the text was supposed to be. The text will not be pulled up and the area will still be seen by the users.

Related :

This document entitled « Major difference between display: none and visibility:  » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.