Is there an opposite to display:none?

Question

The opposite of visibility: hidden is visibility: visible. Similarly, is there any opposite for display: none?

Many people be

Answer 1

In the case of a printer friendly stylesheet, I use the following:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

I used this when I needed to print a form containing values and the input fields were difficult to print. So I added the values wrapped in a span.print_only tag (div.print_only was used elsewhere) and then applied the .no_print class to the input fields. So on-screen you would see the input fields and when printed, only the values. If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn't necessary in my case. Perhaps not the the most elegant solution but it worked for me!

Answer 2

You can use this display:block; and also add overflow:hidden;

Answer 3

visibility:hidden will hide the element but element is their with DOM. And in case of display:none it'll remove the element from the DOM.

So you have option for element to either hide or unhide. But once you delete it ( I mean display none) it has not clear opposite value. display have several values like display:block,display:inline, display:inline-block and many other. you can check it out from W3C.

Answer 4

you can use

display: normal;

It works as normal.... Its a small hacking in css ;)

Answer 5

A true opposite to display: none there is not (yet).

But display: unset is very close and works in most cases.

From MDN (Mozilla Developer Network):

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

(source: https://developer.mozilla.org/docs/Web/CSS/unset)

Note also that display: revert is currently being developed. See MDN for details.

Answer 6

I use display:block; It works for me