CSS Visibility

The visibility property in CSS controls whether an element is visible or hidden in the document layout, without affecting its position in the document flow. Unlike the display property, which removes an element entirely from the layout, visibility can hide an element but still retain the space it occupies on the page.

Syntax

element {
    visibility: visible | hidden | collapse | inherit | initial | unset;
}

Try It Now

Property Values

  • visible: The default value. The element is visible on the page.
    • Example: visibility: visible;
  • hidden: The element is hidden, but it still occupies space in the layout, and other elements will not move to fill that space.
    • Example: visibility: hidden;
  • collapse: This value is specifically for table rows, columns, and their groupings (like <tr>, <th>, <td>). It causes the element to be hidden and also removes it from the layout (its space is collapsed).
    • Example: visibility: collapse; (mostly used with table elements)
  • inherit: The element inherits the visibility value from its parent element.
    • Example: visibility: inherit;
  • initial: Resets the visibility to its default value (visible).
    • Example: visibility: initial;
  • unset: Resets the property to its inherited value if applicable, or to the initial value if not.
    • Example: visibility: unset;

How visibility Works

  • visibility: visible makes the element fully visible, just like the default behavior.
  • visibility: hidden hides the element, but it still occupies space in the layout. This can be useful when you want to hide an element temporarily but maintain the layout integrity.
  • visibility: collapse is mainly used for table elements to hide them and collapse their space, which doesn’t affect the other table rows or columns.

Unlike display: none;, which removes the element entirely (including its space), visibility: hidden; keeps the element in place, allowing the layout to remain the same but with the element invisible.

Examples

Example 1: Using visibility: hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-text {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <p>This is a <span class="hidden-text">hidden text</span> inside a paragraph.</p>
</body>
</html>

Try It Now

In this example, the text inside the span will not be visible, but the space it occupies will remain, so the rest of the text and layout are unaffected.

Example 2: Using visibility: collapse with a Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        tr.hidden-row {
            visibility: collapse;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr><th>Header 1</th><th>Header 2</th></tr>
        <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>
        <tr class="hidden-row"><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr>
        <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td></tr>
    </table>
</body>
</html>

Try It Now

In this example, the third row is collapsed (hidden) along with the space it occupies, leaving the rest of the table unaffected.

Example 3: Using visibility: visible and hidden on Multiple Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <p>This is visible text.</p>
    <p class="hidden">This text is hidden but takes up space.</p>
    <p>This text is visible again.</p>
</body>
</html>

Try It Now

In this example, the second paragraph is hidden, but the space it occupies is preserved.

Use Cases for visibility

  • Hiding elements temporarily: When you want to hide an element temporarily without affecting the layout, visibility: hidden is useful.
  • Animation purposes: visibility can be used in CSS animations to hide elements after a transition, while the element’s space is still kept in place.
  • Table rows/columns: When working with tables, visibility: collapse can be used to hide table rows or columns and collapse their space.
  • Conditional rendering: In cases where you might need to show or hide an element without triggering a reflow of the layout, visibility can be a helpful tool.

Difference Between visibility and display

  • visibility: hidden: Hides the element but keeps its layout space intact.
  • display: none: Completely removes the element from the layout, and it no longer takes up space in the document.

Tips

  • Don’t confuse visibility with display: While both can hide elements, visibility: hidden retains the space occupied by the element, while display: none removes both the element and its space from the layout.
  • Use visibility: hidden for non-disruptive hiding: When you need to hide content but want the page layout to stay intact (for example, hiding a dropdown menu after use).
  • Combining with transitions: If you want to animate visibility changes, consider combining visibility with opacity or transitions for smooth effects.

The visibility property is a simple yet useful tool for controlling the visibility of elements in CSS without affecting the layout structure.