🎯 CSS visibility Property

The visibility CSS property controls whether an HTML element is visible or hidden while preserving its layout space.

Unlike display: none, the element is hidden but still occupies space on the page, so the layout does not shift.

The visibility property is useful when you want to hide elements without affecting the page structure or layout flow.

• Hides elements without changing layout
• Useful for UI transitions and toggles
• Prevents layout shifting
• Works well with dynamic interfaces

The element is fully visible on the page. This is the default behavior.

div {
    visibility: visible;
}
                

The element becomes invisible but still occupies space in the layout.

div {
    visibility: hidden;
}
                

This is the key difference from display: none, which removes the element completely from the layout.

Used mainly for table elements. Rows or columns are hidden without taking up space.

tr {
    visibility: collapse;
}
                

In non-table elements, it behaves similarly to hidden.

Resets the property to its default value (visible).

Inherits the visibility value from its parent element.