Sometimes you need to hide elements on a webpage.
CSS gives two main ways to do this: display none and visibility hidden.
They look similar, but they behave very differently in layouts.
When display is set to none, the element is completely removed from the layout.
It does not take any space on the page.
When visibility is hidden, the element is not visible, but it still takes up space in the layout.
Developers often use display none to hide menus, popups, and sections until they are needed.
Visibility hidden is useful when you want to keep the space but hide the content, such as in animations or placeholders.
Practice task
Create three boxes:
- Hide one using display none
- Hide one using visibility hidden
- Keep one visible
Compare how the layout behaves.
Next lesson
In the next page, you will learn about the CSS position property and how it controls element placement.