Hide an Element

Hiding an element can be done with display: none;. With this property, the element will be hidden, and the page will be displayed as if the element is not there. Another way to hide an element is to use visibility: hidden;, but with this property, the element will still take up the same space as before. It will be hidden, but there will be white space in its place:

HTML file:	Displayed by browser:
<style> h1.gone { display: none; } h1.hidden { visibility: hidden; } </style> <body> <h1>This is a visible heading</h1> <h1 class="gone">This is a display:none heading</h1> <p>Notice that the h1 element with display: none; does not take up any space.</p> <hr /> <h1>This is a visible heading</h1> <h1 class="hidden">This is a visibility:hidden heading</h1> <p>Notice that the visibility:hidden heading still takes up space.</p> </body>	This is a visible heading This is a display:none heading Notice that the h1 element with display: none; does not take up any space. This is a visible heading This is a visibility:hidden heading Notice that the visibility:hidden heading still takes up space.

HTML file:

Displayed by browser:

<body>
<h1>This is a visible heading</h1>
<h1 class="gone">This is a display:none heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>
<hr />
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a visibility:hidden heading</h1>
<p>Notice that the visibility:hidden heading still takes up space.</p>
</body>

This is a visible heading

This is a display:none heading

Notice that the h1 element with display: none; does not take up any space.

This is a visible heading

Notice that the visibility:hidden heading still takes up space.