How to hide an Element using CSS ?

Hiding an element in CSS is a common task, and there are various methods to achieve it. The primary approaches involve manipulating the display property or using the visibility property.

Using display: none;

To hide an element using CSS, you can use the “display: none;” property. This effectively removes the element from the layout, making it invisible and taking up no space on the page.

Syntax:

/* Hide an element by setting its display property to none */
.hidden-element {
  display: none;
}

Using visibility: hidden;

To hide an element using CSS with “visibility: hidden;”, the element remains in the layout but becomes invisible. It still occupies space on the page, unlike “display: none;”, which completely removes it from the layout.

Syntax:

/* Hide an element by setting its visibility property to hidden */
.hidden-element {
  visibility: hidden;
}

Features:

• display: none; It completely removes the element from the layout, and it won’t take up any space. The element is not rendered, and its space is collapsed.
• visibility: hidden; It hides the element while still preserving its space in the layout. The element remains in the document flow, but it’s not visible.