CSS visibility Property (original) (raw)

Last Updated : 11 Jul, 2025

The visibility property specifies whether or not an element is visible. It can take values such as visible, hidden, or collapse. Unlike display: none, which removes the element from the layout, visibility: hidden hides the element but maintains its space in the layout.

**Syntax

visibility: visible|hidden|collapse|initial|inherit;

**Property values

• **visible: It is the default value. The element is shown or visible normally in the web document.
• **hidden: The element is not visible and does not take up any space in the layout. It is effectively removed from view.
• **collapse: For table elements, this value hides the row or column and it does not take up any space in the layout, similar to hidden. It is often used with table rows or columns.
• **inherit: The element takes on the property value from its parent element, making it inherit the visibility setting from its containing element.
• **initial: The element is set to the default value of the property as defined by the CSS specification. For visibility, this is typically visible.

**Syntax

visibility:hidden;

**Example: In this example, we use CSS to style elements. The .geeks class sets visibility: visible;, making the paragraph visible while

is styled green and text aligned center.

html `

CSS | visibility Property