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.