We can hide an element in CSS using the display property or the visibility property. Each of these
properties accomplishes hiding an element in slightly different ways:
- Using display : none;
- Using visibility : hidden;
Using display : none;: This completely removes the element from the layout flow. If the element
doesn't exist in the HTML structure at all.
Example:
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>
</body>
</html>
Output:
This is a visible heading
This is a hidden heading
Notice that the h1 element with display: none; does not take up any space.
Using visibility : hidden;: This hides the element, but it still takes up space in the layout. The
space that the element would normally occupy is preserved.
Example:
<html>
<head>
<style>
h2.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h2 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden h2 heading still takes up space.</p>
</body>
</html>
Output:
This is a visible heading
This is a hidden heading
Notice that the hidden h2 heading still takes up space.
