Display none and visibility
Learn the difference between display: none and visibility: hidden.
Fully hide with display: none
The display: none declaration removes an element from the document entirely. It is not shown, takes no space, and the page layout ignores it. For accessibility, screen readers often skip it too.
So display: none is handy for sections you hide temporarily. For example, a dropdown menu takes display: none when closed and switches back to display: block when opened.
Hide while keeping space with visibility: hidden
visibility: hidden also hides an element, but differently: the element turns invisible yet keeps its place in the document. Surrounding elements keep their layout as if it were there; an empty box remains.
The distinction matters: display: none takes no space, while visibility: hidden leaves an empty box. Which one you pick depends on whether the hidden element should still hold its spot.
When to use which?
If you want to hide an element but keep its spot empty, use visibility: hidden. For example, a card face that vanishes briefly but should not shift its surroundings fits this.
But if the element should take no space at all, pick display: none. Dropdowns, tabs and modals take this value when closed and revert to their old value when opened.
Exercise Hide the modal
Write a .modal class selector and assign display: none. The modal will then stay closed by default and take no space.
Show example solution
/* hide the modal */
.modal {
display: none;
}Test yourself
-
What does display: none do?
.hidden { display: none; }- Hides the element but keeps its space
- Pushes the element to the right of the page
- Removes the element; it takes no space
- Makes the element transparent
Show answer
Removes the element; it takes no space — Correct. display: none removes the element from the document; it takes no space.
-
Hide the element, keep its space
.ghost { ____; }Show answer
.ghost { visibility: hidden; } -
Match each declaration to its effect
- display: none
- Takes no space
- visibility: hidden
- Keeps its space
- display: block
- Starts a new line