The visibility CSS property is used to control the visibility of an element. It determines whether an element is visible or hidden, affecting its rendering on the page.
The visibility property accepts two values:
-
visible: This is the default value. The element is visible and will be displayed on the page. -
hidden: The element is hidden, but it still occupies space in the layout. It is not visible, and other elements are displayed as if it doesn’t exist.
Here’s an example:
.hidden-element {
visibility: hidden;
}
In this example, the .hidden-element class sets the visibility property to hidden. The element with this class will be hidden from view, but it will still take up space within the layout. It will not be displayed, and other elements will flow as if it were not present.
It’s important to note that the visibility property only affects the visibility of the element itself and does not impact the visibility of its children or descendants. To hide an element and its children completely, including removing it from the layout flow, you can use the display property with a value of none.
The visibility property is commonly used when you want to hide an element while preserving its space in the layout or when you want to toggle the visibility of an element dynamically with JavaScript or CSS animations.