You can hide an element in CSS using the CSS display: none or Visibility: hidden property. display: none removes the entire element from the page and the pad affects the layout. visibility: hidden hides the element while keeping the same space.
You may come across a scenario where you want to hide an element on the web page. For example, you might have a block of text that you want to keep hidden that appears when a user clicks a button.
Hide CSS Element
There are two main approaches to hide an element in CSS, using:
- The display attribute: none .
- Visibility: hidden attribute.
The first approach this can affect the layout of your web page. But the second method is still popular.
Hide CSS element: display
The display property controls how an element is displayed on a web page. Each element in an HTML document has a default value for the display property, although that value depends on the element. For most items, the default display value is block or inline.
If you don’t want an item to display on an item, you can set the value of the display property to none.
The following style rule hides an element on a web page:
When you set the value of display to none, the affected item will disappear. This means that the element will no longer take up space on the web page.