[css] Is there an opposite to display:none?

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

Many people become confused figuring out how to show an element when it has display: none, since it's not as clear as using the visibility property.

I could just use visibility: hidden instead of display: none, but it does not give the same effect, so I am not going with it.

This question is related to css

The answer is


display: none doesn’t have a literal opposite like visibility:hidden does.

The visibility property decides whether an element is visible or not. It therefore has two states (visible and hidden), which are opposite to each other.

The display property, however, decides what layout rules an element will follow. There are several different kinds of rules for how elements will lay themselves out in CSS, so there are several different values (block, inline, inline-block etc — see the documentation for these values here ).

display:none removes an element from the page layout entirely, as if it wasn’t there.

All other values for display cause the element to be a part of the page, so in a sense they’re all opposite to display:none.

But there isn’t one value that’s the direct converse of display:none - just like there's no one hair style that's the opposite of "bald".


opposite of 'none' is 'flex' while working with react native.


The best answer for display: none is

display:inline

or

display:normal

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.


I ran into this challenge when building an app where I wanted a table hidden for certain users but not for others.

Initially I set it up as display:none but then display:inline-block for those users who I wanted to see it but I experienced the formatting issues you might expect (columns consolidating or generally messy).

The way I worked around it was to show the table first and then do "display:none" for those users who I didn't want to see it. This way, it formatted normally but then disappeared as needed.

Bit of a lateral solution but might help someone!


When changing element's display in Javascript, in many cases a suitable option to 'undo' the result of element.style.display = "none" is element.style.display = "". This removes the display declaration from the style attribute, reverting the actual value of display property to the value set in the stylesheet for the document (to the browser default if not redefined elsewhere). But the more reliable approach is to have a class in CSS like

.invisible { display: none; }

and adding/removing this class name to/from element.className.


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.


You can use display: block

Example :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

The best "opposite" would be to return it to the default value which is:

display: inline

display:unset sets it back to some initial setting, not to the previous "display" values

i just copied the previous display value (in my case display: flex;) again(after display non), and it overtried the display:none successfuly

(i used display:none for hiding elements for mobile and small screens)


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!


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


Like Paul explains there is no literal opposite of display: none in HTML as each element has a different default display and you can also change the display with a class or inline style etc.

However if you use something like jQuery, their show and hide functions behave as if there was an opposite of display none. When you hide, and then show an element again, it will display in exactly the same manner it did before it was hidden. They do this by storing the old value of the display property on hiding of the element so that when you show it again it will display in the same way it did before you hid it. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

This means that if you set a div for example to display inline, or inline-block and you hide it and then show it again, it will once again show as display inline or inline-block same as it was before

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

script:

  $('a').click(function(){
        $('div').toggle();
    });

Notice that the display property of the div will remain constant even after it was hidden (display:none) and shown again.


I use display:block; It works for me


you can use

display: normal;

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