CSS Hide Elements
You can hide elements with CSS using the display or visibility property.
CSS display: none;
With display: none, the element is completely removed from the document flow and takes up no space.
It is often used together with JavaScript to show or hide elements without deleting and recreating them.
Hide an Element - Use display:none or visibility:hidden?
You can hide an element by setting display: none. The element is hidden and the page is shown as if it were not there.
You can also use visibility: hidden to hide an element. With this property the element is hidden, but it still takes up the same space as before.
display: none
The hidden heading disappears and takes up no space.
Prompt
An HTML page that hides an element with display: none.
In an internal
<style> block, set h1.hidden { display: none; }. Add two headings: one normal and one with class "hidden". The hidden one disappears and takes up no space.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This heading is hidden with display: none</h1>
<p>Notice that the hidden heading takes up no space.</p>
</body>
</html>
visibility: hidden
The hidden heading disappears but still takes up its space.
Prompt
An HTML page that hides an element with visibility: hidden.
In an internal
<style> block, set h1.hidden { visibility: hidden; }. Add two headings: one normal and one with class "hidden". The hidden one disappears but still takes up its space.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This heading is hidden with visibility: hidden</h1>
<p>Notice that the hidden heading still takes up its space.</p>
</body>
</html>
CSS Display/Visibility Properties
A summary of the properties used here:
display— sets how an element is displayed;noneremoves it from the flow.visibility— sets whether an element is visible;hiddenhides it but keeps its space.