CSS Tutorial

CSS Visibility

The visibility property in CSS is used to control whether an element is visible or hidden. However, unlike the display property, visibility does not remove the element from the document flow. An element with visibility: hidden will still occupy space in the layout, but it will not be visible.

Key Points on CSS Visibility:

The visibility property can take two values: visible (default) and hidden.
Elements with visibility: hidden will not be visible, but they will still occupy space in the layout.
Setting an element to visibility: collapse can be used with table elements to hide rows or columns without affecting the layout of the table.
Visibility is useful when you want to hide an element temporarily but retain its space for layout purposes.

Syntax for CSS Visibility:

Syntax Example

/* Visibility syntax */
        visibility: visible | hidden | collapse;
                
        /* Example */
        visibility: hidden;

Examples of CSS Visibility:

The following examples demonstrate the usage of the visibility property:

Code Example: Visibility Visible

div {
            visibility: visible;
        }

Output

This div is visible.

Code Example: Visibility Hidden

div {
            visibility: hidden;
        }

Output

This div is hidden but still occupies space.

Code Example: Visibility Collapse (for table rows)

table tr {
            visibility: collapse;
        }

Output

Visible Row 1

This row is collapsed and not visible.

Visible Row 2

Common Visibility Property Values:

visible: The element is visible.
hidden: The element is hidden, but still occupies space in the layout.
collapse: Used in table elements to hide rows or columns without affecting the layout.

When using the visibility property, it's important to remember that the element will still affect the document flow, unlike using display: none. Use visibility when you want to hide elements without disrupting the overall page layout.