Major difference between display: none and visibility:

August 2017



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


Published by netty5. Latest update on February 13, 2010 at 04:45 AM by jak58.
This document, titled "Major difference between display: none and visibility: ," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).